使用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 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
全面解析bootstrap格子布局
May 22 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python操作Excel的学习笔记
2021/02/18 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
人事文员岗位职责
2014/02/16 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
检察院起诉书
2015/05/20 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js