评论：可拖拽和带预览图的jQuery文件上传插件ssi-uploader  [查看原文]

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

将文件上传移至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有没有遇到同样情况的？

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

喋喋为何叫不休0
2017/9/21 15:18:12

http://blog.csdn.net/a632189007/article/details/77981951

烟火0
2017/7/13 14:31:49

  MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;  

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

酒窝小包子0
2017/11/17 17:33:24

“前端多张图片上传时，是将多张图片一张一张post到后端；因此，后端只需要完成单张图片的上传保存即可”是这样吗？还是后端也要实现多张图片的上传？

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

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

我也遇到这个问题

各位大牛们，请问跨域怎么解决？

Music0
2017/6/7 12:24:21

上传都是一个一个处理的！

这个上传大文件100M以上报错，但是捕捉不到错误，怎么捕捉错误提示？

请问楼主在后台怎么接收上传的文件呢？ Request.Files["FileData"] 这样写是取不到的！

山北岸南1
2017/5/18 19:50:56

 Request.Files[0]这样就可以了

懂0
2017/6/1 19:44:24

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

Music1
2017/6/7 12:27:02

<?php
$filename = $_FILES["ssi-upload"]['name'];
$userid = '76';     // 定义的常量
$bookid = '5530';   // 由页面传值  现在先写死
$path = $userid.'/'.$bookid.'/CONTENT/'; // 服务器存储路径
if(!is_readable($path))  
    {  
        is_file($path) or mkdir($path,0777,true);  
    }	
if($filename) {
    move_uploaded_file($_FILES["ssi-upload"]["tmp_name"],$path.$filename);
}
echo "上传成功！";

php 后台接受转存到服务器的代码！

这个实在不错，直接放在javaweb包下就可以用了

GavinJou大笨象0
2017/5/15 17:26:48

为什么当我尝试着抛异常的时候会报错

$('#ssi-upload').ssi_uploader({
    url: './servlet/UploadServlet',
    maxFileSize: 6,
    allowed: ['jpg', 'gif', 'txt', 'png', 'pdf'],
    data: {
        "mytest": getTest(),
        "myttt": "id2"
    },
    beforeUpload: function() {
        if (!checkNumber($("#tttttt").text())) {
            throw ("you haven`t set number");
        }

    }
});

界面的console里报错

There is an error in beforeUpload callback
ssi-uploader.js:423 you haven`t set number
ssi-uploader.js:663 Uncaught TypeError: Cannot read property 'abort' of undefined
    at Ssi_upload.abort (ssi-uploader.js:663)
    at HTMLButtonElement.<anonymous> (ssi-uploader.js:159)
    at HTMLDivElement.dispatch (jquery-2.1.1.min.js:3)
    at HTMLDivElement.r.handle (jquery-2.1.1.min.js:3)

不错，很简洁，结构嵌套在自己网页上非常合适。不过有个bug，就是div如果是在form 里面，由于 '<span class="ssi-InputLabel">' + '<button class="ssi-button success">' + this.language.chooseFiles + '</button>' + 即ssi-uploader.js 35行，没有指定type="button"，会引起form提交

Aether0
2017/5/14 12:13:45

其他几个button 也有这个毛病

曲胜龙0
2017/5/23 15:02:45

那就是加上button就好了呗？

江潮xiaopan啊潮0
2017/6/27 0:43:08

加上就好

var locale方法里加上 

zh_CN: {
    success: '上传成功',
    sucUpload: '上传成功',
    chooseFiles: '选择文件',
    uploadFailed: '上传失败',
    serverError: '服务器内部错误',
    error: '错误',
    abort: '中止',
    aborted: '已中止',
    files: '文件',
    upload: '上传',
    clear: '清空',
    drag: '将图片拖拽至此并释放',
    sizeError: '$1 超出了 $2 的大小限制',
    extError: '$1 类型不被支持',
    someErrorsOccurred: '发生了一些错误!',
    wentWrong: '出问题了哦!',
    pending: '等待上传',
    completed: '完成',
    inProgress: '正在上传'
}

中文的语言包哟 

调用是在初始化的地方写死这个

$('#ssi-upload').ssi_uploader({
    locale:"zh_CN",
})

瞎闹0
2018/12/26 10:42:27
出现了乱码...

请问这个插件展示图片的规律是什么，有什么方法之类的吗，求详解。完全看不懂图片的排序方式啊

修改源码添加初始化功能：

在783行左右，在下面追加添加

initImgArray :{},  //添加初始化图片地址数组
initImgNameArray :{},//添加初始化图片名字数组

然后到60行左右，在下面追加

if(this.options.initImgArray){
            var getTemplate = function (index,filename) {
                return '<table class="ssi-imgToUploadTable ssi-pending">' +
                    '<tr><td class="ssi-upImgTd">' +
                    '<img class="ssi-imgToUpload" src=""/><i class="fa-spin fa fa-spinner fa-pulse"></i>' +
                    '</td></tr>' +
                    '<tr><td><div id="ssi-uploadProgress' + index + '" class="ssi-hidden ssi-uploadProgress"></div></td></tr>' +
                    '<tr><td><button data-delete="' + index + '" class=" ssi-button error ssi-removeBtn"><span class="trash10 trash"></span></button></td></tr>' +
                    '<tr><td>' + filename + '</td></tr></table>'
            };

            for (var i = 0; i < this.options.initImgArray.length; i++) {
                if (this.options.initImgArray[i] !== null) {
                    $uploadBox.append(getTemplate(i,this.options.initImgNameArray[i]));
                    $uploadBox.find("#ssi-uploadProgress" + i).parents('table.ssi-imgToUploadTable')
                        .find('.ssi-imgToUpload')
                        .attr('src', this.options.initImgArray[i]) //set src of the image
                        .next().remove();//remove the spinner
                    this.options.initImgArray[i] = null;
                }
            }
        }

3.然后在html页面初始化插件的时候加上initImgArray,和initImgNameArray数组就行

b2894lxlx1
2017/5/10 10:15:58

也可以不需要initImgNameArray

60行代码换成以下这个：

if(this.options.initImgArray){
            var getTemplate = function (index,filename) {
                return '<table class="ssi-imgToUploadTable ssi-pending">' +
                    '<tr><td class="ssi-upImgTd">' +
                    '<img class="ssi-imgToUpload" src=""/><i class="fa-spin fa fa-spinner fa-pulse"></i>' +
                    '</td></tr>' +
                    '<tr><td><div id="ssi-uploadProgress' + index + '" class="ssi-hidden ssi-uploadProgress"></div></td></tr>' +
                    '<tr><td><button data-delete="' + index + '" class=" ssi-button error ssi-removeBtn"><span class="trash10 trash"></span></button></td></tr>' +
                    '<tr><td>' + filename + '</td></tr></table>'
            };
            for (var i = 0; i < this.options.initImgArray.length; i++) {
                if (this.options.initImgArray[i] !== null) {
                    var temp = this.options.initImgArray[i].split('/');
                    $uploadBox.append(getTemplate(i,temp[temp.length - 1]));
                    $uploadBox.find("#ssi-uploadProgress" + i).parents('table.ssi-imgToUploadTable')
                        .find('.ssi-imgToUpload')
                        .attr('src', this.options.initImgArray[i]) //set src of the image
                        .next().remove();//remove the spinner
                    this.options.initImgArray[i] = null;
                }
            }
        }

wk_99990
2017/5/19 17:02:33

有个bug，就是初始化图片后，再上传加载进来的图片 就被覆盖了， 正在改造，搞好后分享！

追风0
2017/6/1 10:44:51
wk_9999你改完了吗？能分享一下吗。

追风0
2017/6/1 11:09:41

wk_9999你改完了，分享下，qq:601630740 谢谢

?右眸 Remnant0
2017/10/25 17:03:40

我也是遇到这个问题了，改完求分享

请问大家，上传文件的格式不受限制，参数怎么写？