使用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' οnclick=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"  οnclick="window.location.reload()">重新整理</button>&nbsp;&nbsp;

        <button class="button" οnclick="window.close()">關閉視窗</button>

        <table style="width: 600px" id="uploadTable" >

            <tr>

                <td>檔案類型</td>

                <td>檔案名稱</td>

                <td>操作</td>

                <td>上傳進度</td>

            </tr>

        </table>

    </div>