web-uploader多文件上传问题,预览问题
一.多文件上传
1.webuploader不能多文件上传
原因是listenForUpload方法里有一段:
uploader.on('beforeFileQueued', function (file) {uploader.reset(); //重置队列文件
});
每次上传它都只会取最后一个文件,去掉就好了
2.需要在js中动态修改为不能多文件上传
在初始化设置中:
var uploader = WebUploader.create({// swf文件路径swf: "../node_modules/webuploader/dist/Uploader.swf",// 文件接收服务端。server: serverURL + 'Helper/HandlerHelper.ashx',// 选择文件的按钮。可选。// 内部根据当前运行是创建,可能是input元素,也可能是flash.pick: { id: '#picker', multiple: true },//fileVal:'Files', //参数名称chunked: true,// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!resize: false,//fileSingleSizeLimit: fileSize, //大小限制,默认是undefinedchunkSize: 180 * 1024, //分片大小threads: 1, //上传并发数。允许同时最大上传进程数。duplicate: false, //可重复上传chunkRetry: true,formData: {'subjectID': getUrlParam('subjectID'),'userID': loginUser,},accept: {extensions: allowFileExe,mimeTypes: allowFileMim}});
其中的multiple就是将picker设为可重复上传的配置项,如果想在代码中动态修改此配置项,很难做到;
直接把picker下面的input设为单选,就可以了:
$('input[name="file"]').removeAttr('multiple');
虽然不是正规打法,但是很好用;
二.预览上传文件
1.图片预览,webuploader自己支持图片预览,需要在文件上传后的事件里重写:
uploader.on('fileQueued', function (file) { // 当有文件被添加进队列的时候uploader.makeThumb(file, function (error, src) { //这个方法是webuploader提供的返回的srcvar img = '<img src=' + src + '>';//把img放在你想要的地方就可以了}, 255, 187);
})
2.视频预览,需要自己修改webuploader.js,增加一个makevideo方法:
makeThumb: 'make-thumb', //webuploader.js里面已有的方法makeVideo:'make-video', //增加一个新的方法//方法内部用来返回视频的src,上面的makeThumb只支持图片,无法返回视频的srcmakeVideo: function (file, cb, width, height) {format = file.name.substr(-4, 4);if (format.toLowerCase() == '.mp4' || format.toLowerCase() == '') {windowURL = window.URL || window.webkitURL;videoURL = windowURL.createObjectURL(file['_events'][0].ctx2.source.source);cb(false, videoURL);} else {cb(true)}},
然后在fileQueue事件里:
uploader.makeVideo(file, function (error, src) {var img = '<video><source src="' + src + '" type="video/mp4"></source></video>';//依然是放在你想要的地方,就会显示出一个不能播放的预览图
})