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

所属分类:输入-上传

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


相关插件-上传

zyupload四种不同的上传PHP版

PHP支持拖拽和裁剪的一款上传插件:zyupload。在js里面可以自定义高度和宽度,类型,远程上传地址等。
  上传
 22128  71

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 32085  141

jQuery多图上传带ajax提交

jQuery多图上传可删除,可以本地预览带前台接口
  上传
 28526  161

html5文件上传插件Pure HTML5 file upload

html5文件上传插件Pure HTML5 file upload
  上传
 34629  81

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

    Learning 0
    2018/3/30 16:08:01
    这个插件实话比较糟糕,responseValidation没什么用,到处是error 回复
    我怀念的是一起做梦 0
    2018/1/16 18:08:53

    大哥有没有办法 我把设个设置成只能上传1张!然后他继续选择图片就覆盖前一张 可以吗

        我怀念的是一起做梦0
        2018/1/17 9:31:10

        搞定了

        三岁半0
        2018/1/18 20:52:16

        可不可以把你搞定的demo给我发一份呀,急用,谢谢啊

    回复
    2901407409 0
    2017/12/6 12:18:30
    怎么额外传参呢?data好像只支持常量。变量并不支持。
        诸葛先生0
        2017/12/6 15:07:51

        去ssi-uploader.js中找到第一部分formData对象。它是表单序列化形式将参数传值到后台。你只要给formData追加你要传递的参数,后台就可以获取到了。注意:直接在js中改的,有时候会受到浏览器缓存的作用,没有及时编译进去,最好使用console.log去看一下,是不是编译进去了。以下有一个fileName就是我传递到后台的参数,我是使用strutsMVC。后台get/set就可以得到参数了。作者是springMVC,获取参数方式不一样,但是本质是一样的。还要注意的是,中文传递的编码问题,由于传递前就已经编码一次了,所以前端只需要编译一次,后端直接decode转码就可以了。

        formData.append('files',thisS.toUpload[i]);formData.append('fileName',encodeURI(thisS.toUpload[i].name));
    回复
    JoviChin 0
    2017/11/22 14:17:50
    此插件用于添加商品时候,上传回调什么的没问题,用的git的最新版,请问,如何在编辑商品的时候也能取到添加过的图片展示出来,并且可以删除并重新上传
        JoviChin0
        2017/11/23 9:08:23

        还有就是如何重新初始化?这个插件有待完善的地方太多了

    回复
    Music 0
    2017/10/26 17:39:21

    windows8.1系统英文和数字命名的文件无法上传!

    其他的炒作系统版本均正常!

        苦瓜0
        2017/11/2 17:14:52
        苹果浏览器呢
    回复
    0
    2017/10/26 13:44:08

    onUpload我想在回调函数中加入data怎么办

    回复
    yefengwuying 0
    2017/10/20 9:45:02

    后台拿不到数据

    回复
    狼灰灰 0
    2017/9/13 16:29:50

    前端获取后台返回数据的方法:  不懂的可以加我QQ或者在邮箱问我  930944122/uuueeu@126.com

    ajaxOptions: {
        headers: {
            'Authentication': token
        },
        success: function(data) {
            console.log(data);
        }
    }
    回复
    狼灰灰 0
    2017/9/13 13:54:01
    不能用,没有接受后台返回的数据。 回复
    枫之幻月 0
    2017/9/2 14:13:42

    为什么选择图片后,图片出现了一瞬间又消失了?

    回复
取消回复