下载地址:点击打开链接

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. Java 集合框架总结--导图

    java的集合导图总结:

  2. 2020年必须掌握的硬核技能k8s

    Kubernetes 是一个软件系统,使你在数以万计的电脑节点上运行软件时就像 所有节点是以单个大节点一样, 它将底层基础设施抽象,这样做同时简化了应用开发.部署,以及对开发和运维团队的管理. Kub ...

  3. Java 添加、隐藏/显示、删除PDF图层

    本文介绍操作PDF图层的方法.可分为添加图层(包括添加线条.形状.字符串.图片等图层).隐藏或显示图层.删除图层等.具体可参考如下Java代码示例. 工具:Free Spire.PDF for Jav ...

  4. Java Web教程——检视阅读

    Java Web教程--检视阅读 参考 java web入门--概念理解.名词解释 Java Web 教程--w3school 蓝本 JavaWeb学习总结(一)--JavaWeb开发入门 小猴子mo ...

  5. XSS Cheat Sheet(basics and advanced)

    XSS Cheat Sheet BASICS HTML注入 当输入位于HTML标记的属性值内或标记的外部(下一种情况中描述的标记除外)时使用.如果输入在HTML注释中,则在payload前加上&quo ...

  6. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  7. 当git上只做文件大小写重命名的修改时,如何躲坑

    一. 提交时 假设修改ABC.java为Abc.java. 1.1 如果使用git命令进行仅涉及大小写的重命名 1.1.1 设置git库为大小写敏感(不建议) $ git config core.ig ...

  8. python学习14集合

    '''''''''集合:set1.定义:是一个无序的不重复元素序列.2.表示:大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用 ...

  9. Pascal 字符串

    Dancing with Strings http://baskent.edu.tr/~tkaracay/etudio/ders/prg/pascal/PasHTM1/pas/pasl1007.htm ...

  10. oracle获取表字段及表注释的相关操作

    一.获取表字段: select * from user_tab_columns where Table_Name='用户表' user_tab_columns 为当前用户的columns,除此之外还有 ...