使用plupload实现多文件上传,自定义参数
下载地址:点击打开链接
1、在开发中可能需要用户附件上传的功能,实现批量上传功能其实就将多个上传任务放到一个集合中,分别上传。
2,使用plupload js插件可以很轻松的实现带参数的多文件上传
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实现多文件上传,自定义参数的更多相关文章
- ***PHP $_FILES函数详解 + PHP文件上传 move_uploaded_file() 参数的正确写法
PHP $_FILES函数详解 在PHP中上传一个文件建一个表单要比ASP中灵活得多.具体的看代码. 如: 复制代码代码如下: <form enctype="multipart/fo ...
- plupload+struts2实现文件上传下载
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" ...
- input type='file'文件上传自定义样式
使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...
- Asp.net MVC中文件上传的参数转对象的方法
参照博友的.NET WebApi上传文件接口(带其他参数)实现文件上传并带参数,当需要多个参数时,不想每次都通过HttpContext.Request.Params去取值,就针对HttpRequest ...
- plupload.Uploader多文件上传
.前台 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommonUpfi ...
- asp.net大文件上传与上传文件进度条问题
利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...
- servlet实现文件上传,预览,下载和删除
一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数 ...
- 关于B/S系统中文件上传的大小限制怎么做
1.前端:采用flash控件或者Html5的特性(有浏览器版本要求)来判断文件大小.纯html或js是没法判断用户上传文件大小的. 2.nginx:服务器端的第一道防线,一般会有对上传文件做大小限制. ...
- Fine Uploader文件上传组件
最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要 ...
随机推荐
- java实现自定义哈希表
哈希表实现原理 哈希表底层是使用数组实现的,因为数组使用下标查找元素很快.所以实现哈希表的关键就是把某种数据类型通过计算变成数组的下标(这个计算就是hashCode()函数 比如,你怎么把一个字符串转 ...
- Elasticsearch 集群部署
本文部署环境 $ cat /etc/redhat-release CentOS Linux release (Core) 部署前系统优化 $ /etc/security/limits.conf roo ...
- 微信自动关闭内置浏览器页面,返回公众号窗口 WeixinJSBridge.call('closeWindow')
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 2019-2020-1 20199326《Linux内核原理与分析》第八周作业
可执行程序工作原理## 编译链接的过程### 示例程序hello.c #include<stdio.h> void main() { printf("Hello world\n& ...
- 重识TCP/IP协议族与HTTP基础
不忘初心 砥砺前行, Tomorrow Is Another Day ! 本文概要: TCP/IP协议族的网络分层 TCP三次握手四次挥手 Http简介 报文结构 Http的请求方法及状态码 常用的H ...
- Material Design 设计规范总结(2)
本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...
- 爱创课堂每日一题第十五题HTTP和HTTPS?
HTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS.默认HTTP的端口号为80,HTTPS的端口号为443. 转载于 ...
- centos6 yum安装jdk1.8+
一.环境Linux操作系统: centos6.9 安装jdk版本: jdk1.8+ 二.安装步骤1. 检查系统是否自带有jdk[root@VM_0_11_centos ~]# rpm -qa |gre ...
- CF思维联系– Codeforces-987C - Three displays ( 动态规划)
ACM思维题训练集合 It is the middle of 2018 and Maria Stepanovna, who lives outside Krasnokamensk (a town in ...
- DAG的深度优先搜索标记
这是图论的基础知识点,也是学习Tarjan的导学课. 一.知识 对于在图G上进行深度优先搜索算法所产生的深度优先森林Gt,我们可以定义四种边的类型: 1.树边(Tree Edge):为深度优先森林中G ...