使用plupload自定义参数实现多文件上传


Posted in Javascript onJuly 19, 2016

1、在开发中可能需要用户附件上传的功能,实现批量上传功能其实就将多个上传任务放到一个集合中,分别上传。

2,使用plupload js插件可以很轻松的实现带参数的多文件上传

使用plupload自定义参数实现多文件上传

3、具体js实现方式

<script type="text/javascript">
var map={};//文件id为key,文件类型为value的集合
// Custom example logic
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', // you can pass in id...
container : document.getElementById('container'), // ... or DOM Element itself
url : '../action/photoUpload.jsp',
flash_swf_url : '../../js/Moxie.swf',
silverlight_xap_url : '../../js/Moxie.xap',
filters : {
max_file_size : '5mb',
mime_types : [ {
title : "图片类型",
extensions : "jpg,gif,png"
} ]
},
init : {
PostInit : function() {
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},
BeforeUpload:function(up,file){
//重点在这里,上传的时候自定义参数信息
uploader.setOption("multipart_params",{"apptype":${param.type},"id":${param.id},"fileType":map[file.id]});
},
FileUploaded:function(up,file){
$("#"+file.id+"btn").parent().html("上传完毕");
$("#"+file.id+"btn").remove();
},
FilesAdded : function(up, files) {
if($("#fileType").val()==1){
alert("请选择附件类型!");
//清空刚才选择的文件
plupload.each(files,function(file) {
uploader.removeFile(file.id);
});
return false;
}
plupload.each(files,function(file) {
map[file.id]=$("#fileType").val();
$("#uploadTable").append("<tr id='"+file.id+"tr'><td>"+$("#fileType").val()+"</td><td>"+file.name+"</td><td><button type='button' id='"+file.id+"btn' onclick=del('"+file.id+"')>删除</button> </td><td id='"+file.id+"_progress'></td></tr>");
});
},
UploadProgress : function(up, file) {
$("#"+file.id+"_progress").html('<span>'+ file.percent + "%</span>");
},
Error : function(up, err) {
alert("此文件上传失败!");
}
}
});
uploader.init();
//根据文件id删除此文件,并且在table中删除此文件的信息
function del(id){
uploader.removeFile(id);
$("#"+id+"tr").remove();
map[id]="";
}
</script>

其他参数在其官网上:http://www.plupload.com/

宅男程序猿,文采不行,如果看着累直接复制js,注意页面上需要有:

<div id="filelist"></div>
<div id="container">
<center>
提示:必须上传 "商户营业执照","税务登记证明","企业法人身份证","考察照片","商户信息调查表","商户协议" 才能提交审批!
</center>
<label>附件类型:</label> <select name="fileType" id="fileType" >
<option value="1">-------请选择-----</option>
<option value="商户营业执照">商户营业执照</option>
<option value="税务登记证明">税务登记证明</option>
<option value="商户信息变更表">商户信息变更表</option>
<option value="其他">其他</option>
</select>
<button class="button" id="pickfiles">选择文件</button>  
<button class="button" id="uploadfiles">批量上传</button>  
<button class="button" onclick="window.location.reload()">刷新</button>  
<button class="button" onclick="window.close()">关闭窗口</button>
<table style="width: 600px" id="uploadTable" border="1">
<tr>
<td>文件类型</td>
<td>文件名称</td>
<td>操作</td>
<td>上传进度</td>
</tr>
</table>
</div>

以上所述是小编给大家介绍的使用plupload自定义参数实现多文件上传,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery中文乱码的多种解决方法
Jun 21 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
简单的js计算器实现
Oct 26 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
artDialog+plupload实现多文件上传
Jul 19 #Javascript
plupload+artdialog实现多平台上传文件
Jul 19 #Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 #Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 #Javascript
js实现动态创建的元素绑定事件
Jul 19 #Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 #Javascript
详谈JS中实现种子随机数及作用
Jul 19 #Javascript
You might like
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JS解析XML实例分析
2015/01/30 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
干部行政关系介绍信
2014/01/17 职场文书
设计师个人求职信范文
2014/02/02 职场文书
药品促销活动方案
2014/02/14 职场文书
学习型党组织心得体会
2014/09/12 职场文书
客房服务员岗位职责
2015/02/09 职场文书
调解协议书范本
2016/03/21 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
oracle重置序列从0开始递增1
2022/02/28 Oracle