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, //大小限制,默认是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 src=' + src + '>';
            //把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 = '<video><source src="' + src + '" type="video/mp4"></source></video>';
   //依然是放在你想要的地方,就会显示出一个不能播放的预览图
})
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值