一.多文件上传
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, //大小限制,默认是undefined
chunkSize: 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提供的返回的src
var img = '';
//把img放在你想要的地方就可以了
}, 255, 187);
})
2.视频预览,需要自己修改webuploader.js,增加一个makevideo方法:
makeThumb: 'make-thumb', //webuploader.js里面已有的方法
makeVideo:'make-video', //增加一个新的方法
//方法内部用来返回视频的src,上面的makeThumb只支持图片,无法返回视频的src
makeVideo: 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 = '';
//依然是放在你想要的地方,就会显示出一个不能播放的预览图
})