下载地址:点击打开链接

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>&nbsp;&nbsp;

        <button class="button" id="uploadfiles">批量上传</button>&nbsp;&nbsp;

        <button class="button"  onclick="window.location.reload()">刷新</button>&nbsp;&nbsp;

        <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实现多文件上传,自定义参数的更多相关文章

  1. ***PHP $_FILES函数详解 + PHP文件上传 move_uploaded_file() 参数的正确写法

    PHP $_FILES函数详解 在PHP中上传一个文件建一个表单要比ASP中灵活得多.具体的看代码. 如:  复制代码代码如下: <form enctype="multipart/fo ...

  2. plupload+struts2实现文件上传下载

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8" ...

  3. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  4. Asp.net MVC中文件上传的参数转对象的方法

    参照博友的.NET WebApi上传文件接口(带其他参数)实现文件上传并带参数,当需要多个参数时,不想每次都通过HttpContext.Request.Params去取值,就针对HttpRequest ...

  5. plupload.Uploader多文件上传

    .前台 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommonUpfi ...

  6. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  7. servlet实现文件上传,预览,下载和删除

      一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数 ...

  8. 关于B/S系统中文件上传的大小限制怎么做

    1.前端:采用flash控件或者Html5的特性(有浏览器版本要求)来判断文件大小.纯html或js是没法判断用户上传文件大小的. 2.nginx:服务器端的第一道防线,一般会有对上传文件做大小限制. ...

  9. Fine Uploader文件上传组件

    最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要 ...

随机推荐

  1. [linux] [nginx] 一键安装web环境全攻略phpstudy版,超详细!

    找到运行中的服务器(实例). 打开这个主要是看它的IP,是公网ip,公网ip,公网ip,重要的事情说三遍. 接下来我们可以不用在阿里云上操作了,直接用客户端操作,这两个客户端就是Xshell 5和Xf ...

  2. amba H2平台用PWM控制LCD背光

    ambarella H2系列Soc的GPIO口能作PWM使用的个数有限(GPIO0-GPIO3),从PRM里GPIO: Function Selection章节可以得到如何配置GPIO为PWM功能. ...

  3. 通过纯css实现图片居中的多种实现方式

    html结构: <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd ...

  4. java学习(第一篇)

    Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式 ...

  5. 运用jieba库统计词频及制作词云

    一.对中国十九大报告做词频分析 import jieba txt = open("中国十九大报告.txt.txt","r",encoding="utf ...

  6. java 之 jsp简介

    什么是jsp? JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java ...

  7. Json & pickle 数据序列化

    前提: 文本文件中只能写入字符串或ascii码格式的内容. info={'name':'zoe','age':18} f=open('test.txt','w') f.write(info) #在文本 ...

  8. 美国在线CEO:雅虎被Verizon收购或导致裁员

    北京时间9月13日消息,据外媒报道,AOL首席执行官蒂姆·阿姆斯特朗(Tim Armstrong)称,雅虎.AOL和Verizon整合业务,将导致"部分工作岗位的变化". 阿姆斯特 ...

  9. STL部分学习总结

    一.map/multimap map/multimap映射容器的元素数据是由一个Key和一个Value成的,key与映照value之间具有一一映照的关系. map/multimap容器的数据结构也采用 ...

  10. Codeforces Round #623 (Div. 2, based on VK Cup 2019-2020 - Elimination Round, Engine) C. Restoring

    C. Restoring Permutation time limit per test1 second memory limit per test256 megabytes inputstandar ...