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

所属分类:输入-上传

 41559  134  查看评论 (135)
可拖拽和带预览图的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.')});


相关插件-上传

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 11533  53

jQuery仿淘宝管理商品批量图片上传插件

jQuery淘宝上传商品图片代码,批量上传插件,(不兼容IE6,7,8)
  上传
 10810  36

Web文件上传模块Plupload

Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。
  上传
 33281  24

jquery上传插件pictureHandle.js

基于jquery上传插件pictureHandle.js,带压缩、且代码注释全
  上传
 8339  21

讨论这个项目(135)回答他人问题或分享插件使用方法奖励jQ币

    吴书书 0
    2017/7/17 0:16:41

    问一下  为毛我点击选择图片的时候 他自己提交了?这是什么BUG

    回复
    锁?2?1? 0
    2017/7/5 15:11:32
    ajaxOptions:{type:'post'},
        锁?2?1?0
        2017/7/5 16:07:27
        这么写没有生效是什么原因?哪位大神告知一下
        唐三藏0
        2017/7/26 16:24:10

        不用自己设置请求方法,ssi-uploader自己先发opstions请求,成功后再发post请求,发送文件

    回复
    锁?2?1? 0
    2017/7/4 16:23:02

    jquery-3.1.1.min.js:4 OPTIONS http://192.168.8.61:8000/file/api/upload 403 (Forbidden)

    send @ jquery-3.1.1.min.js:4

    ajax @ jquery-3.1.1.min.js:4

    ajaxLoopRequest @ ssi-uploader.js:567

    Ssi_upload.uploadFiles @ ssi-uploader.js:450

    (anonymous) @ ssi-uploader.js:155

    dispatch @ jquery-3.1.1.min.js:3

    q.handle @ jquery-3.1.1.min.js:3

    police.html:1 XMLHttpRequest cannot load http://192.168.8.61:8000/file/api/upload. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. The response had HTTP status code 403.

    police.js?v=2.0.0:260 >>>> Object {uploadStatus: "error", responseMsg: "服务器内部错误", name: "2登录界面-账号禁用.png", size: "279.72", type: "image/png"} undefined

    ssi-uploader.js:562 (3) [Object, "error", "", callee: function, Symbol(Symbol.iterator): function]

    ssi-uploader.js:563  Ajax error: error

    回复
    锁?2?1? 0
    2017/7/4 16:22:29

    大神看看这是什么原因

    回复
    Holiday 0
    2017/6/27 13:59:07

    请问下,这个是怎么循环的

    回复
    稻草ㄊ? 0
    2017/6/21 9:38:47

    请问下 苹果手机系统上只能显示一张,怎么解决。

    回复
    Music 0
    2017/6/7 12:22:41

    将文件上传移至input发生change事件之后!会选中即上传! 

    $input.on('change', function() { //choose files
        thisS.toUploadFiles(this.files);
        $input.val('');
        thisS.uploadFiles();
    });

    这时候如果连续选择,第三次会报错!错误信息如下:

    Uncaught TypeError: Cannot read property 'name' of undefined    

    at Object.beforeSend (ssi-uploader.js:532)    

    at Function.ajax (jquery-1.12.3.min.js:4)   

    at ajaxLoopRequest (ssi-uploader.js:594)    

    at Ssi_upload.uploadFiles (ssi-uploader.js:477)    

    at HTMLInputElement.<anonymous> (ssi-uploader.js:71)    

    at HTMLInputElement.dispatch (jquery-1.12.3.min.js:3)    

    at HTMLInputElement.r.handle (jquery-1.12.3.min.js:3)beforeSend @ ssi-uploader.js:532ajax @ jquery-1.12.3.min.js:4ajaxLoopRequest @ ssi-uploader.js:594Ssi_upload.uploadFiles @ ssi-uploader.js:477(anonymous) @ ssi-uploader.js:71dispatch @ jquery-1.12.3.min.js:3r.handle @ jquery-1.12.3.min.js:3有没有遇到同样情况的?

    回复
    0
    2017/6/1 19:47:03

    我是springmvc的框架。 我后台怎么接受url传来的图片对象????求告知??

    回复
    0
    2017/6/1 18:38:22
    如果前台,按照那种方式去传到后台, 后台怎么写?  springmvc的
        烟火0
        2017/7/13 14:31:49

          MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;  

         Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象  

    回复
    woshi283 0
    2017/5/24 19:40:08

    明明上传成功,为什么会返回错误  uploadStatus: "error", name: "off.png", size: "2.44", type: "image/png"

        锁?2?1?0
        2017/7/5 18:29:19

        我也遇到这个问题

    回复
取消回复