可拖拽和带预览图的jQuery文件上传插件ssi-uploader

所属分类:输入-上传

 106508  485  查看评论 (177)
分享到微信朋友圈
X
可拖拽和带预览图的jQuery文件上传插件ssi-uploader ie兼容10

简要教程

ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件。该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便。

安装

可以通过bower或npm来安装ssi-uploader文件上传插件。

bower install ssi-uploader
npm install ssi-uploader

使用方法

在页面中引入ssi-uploader.css和ssi-uploader.js文件。

<link rel="stylesheet" href="path/to/ssi-uploader.css">
<script src="path/to/ssi-uploader.js"></script>

HTML结构

最基本的文件上传HTML结构是使用一个<input>元素,类型为file,并指定一个id。

<input type="file" multiple id="ssi-upload"/>

初始化插件

在页面DOM元素加载完毕之后,可以通过ssi_uploader方法来初始化该文件上传插件。

$('#ssi-upload').ssi_uploader({
    url: 'path/to/upload.php'
});

配置参数

ssi_uploader文件上传插件的可用配置参数如下:

参数类型默认值描述
url{String}null接收ajax请求的地址。必须填写。
data{Object}null发送请求的额外数据。例如$('input').ssi-uploader({url:'upload.php',data:{"name":"myDragon"}})
ajaxOptions{Object}{type:'DELETE'}{type:'DELETE'}扩展默认的$.ajax函数的选项。
locale{String}"en"使用的本地化语言。
preview{boolean}true是否启用文件预览图效果。
maxNumberOfFiles{Number}null每次允许上传多少个文件。
maxFileSize{Number}null允许上传的最大文件尺寸。
allowed{Array}['jpg', 'jpeg', 'png', 'bmp', 'gif']允许上传的文件类型。
errorHandler{Object}
用于处理错误信息的方法。
beforeUpload{Function}
文件上传前执行的回调函数。
beforeEachUpload{Function}
每一个单独的文件上传前执行的回调函数。
onUpload{Function}
文件上传后执行的回调函数。
onEachUpload{Function}
每一个单独的文件上传后执行的回调函数。
responseValidation{Object||false}
设置错误校验,插件将显示设置的信息。可以可以是:{ type:"error",result:"Already exists" }或{ error:"Already exists." }。

其中,errorHandler参数带有一个errorHandler.method函数,该函数错误信息和类型。

function(msg,type){alert(msg);}

responseValidation对象的可用属性有:

  • validationKey:类型{String||Object},设置验证信息。

  • resultKey:类型{String||Object},设置返回验证信息。

  • success:类型{String},设置成功信息。

  • error:类型{String},设置错误信息。

例如:

//structure 1
$('#ss-uploader').ssi_uploader({
  responseValidation:{
    validationKey: 'type',
    resultKey: 'data',
    success: 'success',
    error: 'error'
  }
});
 
//result
 /*
  {
    type:'error',
    data:'Already Exists.'
  } 
*/
 
//structure 2
$('#ss-uploader').ssi_uploader({
  responseValidation:{
    validationKey: {
      success: 'success',
      error: 'error'
    },
    resultKey: 'validationKey'
  }
})
//result
 /*
  {
    error:'Already Exists.'
  } 
*/

回调函数

ssi-uploader文件生成插件支持4种回调函数:beforeUpload、beforeEachUpload、onUpload和onEachUpload。

beforeUpload

beforeUpload回调函数在文件上传前执行的回调函数。

$('input').ssi_uploader({url:'uploadAction.php',beforeUpload:function(){
   console.log('文件上传准备就绪!');
}})
 
$('input').on('beforeUpload.ssi-uploader',function(){console.log('一个文件准备上传。')});

beforeEachUpload

beforeEachUpload回调函数在每一个单独的文件上传前执行的回调函数。该函数访问每个文件的信息和xhr对象。如果终止了某个文件,你可以设置一个字符串,提示取消的原因,并显示的错误信息中。

$('input').ssi_uploader({url:'uploadAction.php',beforeEachUpload:function(fileInfo,xhr){
   console.log(fileInfo.name+' '+fileInfo.type+' '+fileInfo.size);
   if(fileInfo.size > 1){ xhr.abort(); }
   return '文件尺寸太大!';
}});
 
$('input').on('beforeEachUpload.ssi-uploader',function(){console.log('A file is going for uploading.')});

onUpload

beforeUpload回调函数在文件上传后执行的回调函数。

$('input').ssi_uploader({url:'uploadAction.php',onUpload:function(){
   console.log('文件上传完毕!');
}})
 
$('input').on('onUpload.ssi-uploader',function(){console.log('文件上传完毕!')});

onEachUpload

beforeUpload回调函数在每一个单独的文件上传后执行的回调函数。

$('input').ssi_uploader({url:'uploadAction.php',onEachUpload:function(fileInfo){
   console.log(fileInfo.uploadStatus+' 'fileInfo.name+' '+fileInfo.type+' '+fileInfo.size+' '+fileInfo.uploadStatus);
}});
 
$('input').on('onEachUpload.ssi-uploader',function(){console.log('A file uploaded.')});


相关插件-上传

jQuery移动端多图上传(带裁剪功能)

适应于手机端上传图片的功能,附带上传图片裁剪功能
  上传
 40170  355

jQuery图片上传展示插件imgFileupload.js

jQuery图片上传展示,支持多图上传,限制图片上传个数
  上传
 113380  506

上传图片-可裁剪

上传图片可裁剪
  上传
 117969  388

手机端实现多图片上传预览

HTML+CSS+原生JS实现手机端实现多图片上传,选中图片后,可以点击放大(有一定的注释,在PC,ipad,IOS和安卓上都测试过)
  上传
 34607  313

讨论这个项目(177)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    柠檬茶 0
    2020/8/5 10:48:13
    根据个人需要,我在这个组件增加了成功回调函数(包含后台返回值),增加提交form表单数据功能(上传图片同时提交表单数据),有需要回邮件1044992077@qq.com 回复
    柠檬茶 0
    2020/7/19 23:55:38
    $("#ces1").ssi_uploader({
        url: "http://localhost:9090/photoOne/fileupload.action",
        maxFileSize: 6,
        allowed: ["jpg", "gif", "txt", "png", "pdf"]
    });

    为什么我这样上传会报错,还是报jquery.js里面的错,上传数据提交问题了,是什么原因呢?有大佬解答下吗谢谢
    报错:

    POST http://localhost:9090/photoOne/fileupload.action 400 (Bad Request)
    Arguments(3)?[{…}, "error", "Bad Request", callee: ?, Symbol(Symbol.iterator): ?]---------ssi-uploader.js:532行
     Ajax error: error

    我是直接用demo里面的来上传图片,请求还没到后台,我用的springmvc

        柠檬茶0
        2020/7/20 0:03:31
        已经解决了,是我代码问题,因为用的是之前的上传接口方法,还带了参数,把参数去掉就行了
    回复
    疾风码农 0
    2019/11/19 18:07:58
    第一张图片会报错 回复
    碎雨 0
    2019/7/30 15:34:23
    如何才能和表单一起提交呢,而且放到form里面还会有bug,不能显示图片 回复
    最初小Q10 0
    2019/7/14 21:34:55
    问个其他人没有问的,如何静态初始化???在编辑的时候,需要显示已经上传过的图片
        石头?工作Q?0
        2020/4/1 16:03:16
        有没人解决这个问题啊,急等
    回复
    gc 0
    2019/7/9 10:45:26
    我这个this对象中明明有图片但是formdata添加不进来是为什么 回复
    风魔小太郎 0
    2019/3/24 22:28:11
    不能修改filename吗?这样的话php后台不是只能通过$_FILES['files']['name'][0]接收了吗,这多蠢啊.... 回复
    张增 0
    2019/2/27 11:06:51
    上传成功怎么获得服务端返回的数据?我想要文件上传地址,
        著名下路提款机1
        2019/4/28 16:57:32
        responseData可以获取返回数据
    回复
    The Commitments 0
    2019/1/23 10:27:38
    我只需要上传一张图片,再上传就覆盖前一张怎么写?求大神解答 回复
    瞎闹 0
    2018/12/21 8:39:01
    怎么样才可以和表单的内容一起提交? 不改变代码好像没办法和表单一起传上去
        W19962090
        2019/1/8 13:49:06
        我也想知道这个,
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复