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

所属分类:输入-上传

 26858  83  查看评论 (82)
可拖拽和带预览图的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图片上传

图片上传
  上传
 65404  268

Web文件上传模块Plupload

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

html5文件上传插件Pure HTML5 file upload

html5文件上传插件Pure HTML5 file upload
  上传
 19611  57

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 44535  301

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

    Tony╃J 0
    2017/3/22 15:44:47

    问下这个上传图片如何限制图片的长和宽????

    回复
    Tony╃J 0
    2017/3/22 10:38:38

    如何获取后台上传完生成的文件名那些数据?

    回复
    111 0
    2017/3/21 10:16:53

    有c#、asp的后台接收代码吗?

    回复
    漠默寞墨 0
    2017/3/17 10:51:47

    大神,在进行修改操作时,怎么在初始化的时候将图片放到插件里面?

    回复
    手揣口袋笑看花开茶靡 0
    2017/3/10 11:32:23
    怎么在选择文件是判断文件名长度过长,然后自动截取前面多少字展示啊?? 回复
    qq12345643534 0
    2017/3/8 19:18:40

    大神,能一次性接受完所有文件吗?

    回复
    b2894lxlx 3
    2017/2/4 10:22:00

    想要添加后台返回数据的话

    1.在第538行,添加一个变量定义,比如我用 returnMsg

    2.在567-582行,cb方法中把data赋值给returnMsg,我就直接加在底部

    function cb(result, data) {
                        if (result) {//if response type is success
                            dataType = "success";
                            msg = thisS.language.success;
                            spanClass = 'check';
                            thisS.successfulUpload++;// one more successful upload
                        } else {
                            uploadBar.addClass('ssi-canceledProgressBar');
                            if (thisS.options.preview) {
                                msg = thisS.language.error;
                            }
                            title = data;
                            thisS.abortedWithError++;
                        }
                        returnMsg = data;
                    }

    3.第587、631行最后加上returnMsg

    4.第595行附近添加 returnMsg:returnMsg

    到这里就修改完可以用后台返回了

    前台调用

    onEachUpload: function (fileInfo) {
                    console.log(fileInfo.returnMsg.content);
                },

    就有了

        array[]0
        2017/2/21 14:33:22

        大神,后台怎么接收数据呀

        b2894lxlx1
        2017/3/7 15:03:11

        1.要是你只上传一张图片,可以调用onEachUpload,在上传后把你想传给后台的数据用js/jq赋值给你的input,后台就有了

        2.要是多张图片的话,可以先用onEachUpload都丢给一个数组,然后再用onUpload赋值给你的input

        从心0
        2017/3/9 10:29:31

        大神,能借鉴下的源码吗

        b2894lxlx1
        2017/3/9 17:13:22
        $('#goods_gallery_url').ssi_uploader({
                    url: '{:U("Goods/UploadImg")}',
                    data: {"savePath": "SourceImg/"},
                    //最大文件大小 mb
                    maxFileSize: 3,
                    //最大文件数
                    maxNumberOfFiles: 6,
                    allowed: ['jpg', 'gif', 'jpeg', 'png'],
                    //每个文件上传回调函数
                    onEachUpload: function (fileInfo) {
                        galleryList.push(fileInfo.returnMsg.content);
                    },
                    onUpload: function () {
                        $("#goods_gallery").val(galleryList);
                    }
                });
        yvoune0
        2017/3/12 0:03:21
        大神可不可以发完整的前后台源码参考下
        NOW开始0
        2017/3/13 21:19:02
        去下载最新版的,这些问题都解决了。https://github.com/ssbeefeater/ssi-uploader这里还有PHP的相关指引:http://ssbeefeater.github.io/#ssi-uploader/documentation
    回复
    道子 0
    2017/1/19 17:24:28

    自动..提交表单怎么解决的啊??作者大大???

        道子0
        2017/1/19 17:27:45

        作者大大 留个QQ或者微信,好不~有什么不会的直接问你了~

        b2894lxlx1
        2017/2/4 10:09:15

        33-41行加上type="button"

        Sweet Dreams0
        2017/2/21 10:33:53

        哪里的33-41行

        Sweet Dreams0
        2017/2/21 10:41:55

        谢谢,找打了

    回复
    ? 殇ぃ堕天♂ 0
    2017/1/9 9:01:11

    在试用的时候发现一个问题:如果上传了多个文件,并且删除一个(删除的文件不是最后一个),后续如果再次上传文件,会出现预览图错乱的问题。

        从心0
        2017/3/9 10:13:56
        确实是
    回复
    晴天雨伞从未被记得 0
    2016/12/16 13:12:57

    请问这个插件展示图片的规律是什么,有什么方法之类的吗,求详解。

    回复
取消回复