使用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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
微信小程序实现上传图片功能
May 28 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
vue实现自定义多选按钮
Jul 16 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
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python基础教程之Hello World!
2014/08/29 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
物流管理专业大学生自荐信
2013/10/04 职场文书
九年级科学教学反思
2014/01/29 职场文书
教师党员一句话承诺
2014/03/28 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP