当前位置: 首页 > news >正文

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>';//依然是放在你想要的地方,就会显示出一个不能播放的预览图
})
http://www.xdnf.cn/news/825643.html

相关文章:

  • Mysql数据类型最细讲解
  • 利用weka进行数据挖掘——基于Apriori算法的关联规则挖掘实例
  • 矩阵运算规律总结
  • Sortable.js官方文档记录
  • 【浏览器】五大最好用的浏览器 最受欢迎的浏览器软件
  • 一文读懂上拉电阻:工作原理和阻值确定
  • bootstraptable 手册_JS表格组件神器bootstrap table使用指南详解
  • 一文读懂 K8s 持久化存储流程
  • COCOS学习笔记--TexturePacker使用详解
  • Hutool工具包等常用工具类总结
  • 电子管是什么?
  • CSharp(C#)语言_反射 和 特性
  • Windows 中安装 Mysql
  • 差分逻辑电平——LVDS、CML、LVPECL、HCSL互连
  • PLY模型格式详解【3D】
  • FTP命令全集
  • struts2 简介
  • 串口驱动分析
  • 11种方法用Python下载文件,建议收藏!!
  • 模拟退火算法详解
  • 简单聊一下EL表达式与单列集合
  • 虚函数详解
  • 什么是ETL?什么是ELT?怎么区分它们使用场景
  • 软件测试面试题合集
  • 学术期刊数据库---EBSCO
  • 两万字总结Linux常用指令 (非常详细)从零基础入门到精通,看完这一篇就够了
  • jQuery插件大全
  • qsort函数的使用方法,以及模拟实现
  • 个人博客系统的测试报告
  • Dom4j解析XML