plupload多文件上传

html文件:

<div id="uploadwin_body" style="">
   <div style="height:260px;overflow:hidden">
      <div style="padding:1px">
         <center>
            <div align="left" style="padding:3px"></div>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <!--上传文件的按钮-->
                     <td align="left">
                        <button type="button" class="webbtn" id="addbtn"  style="position: relative;"><input type="file" value="" placeholder="添加文件" class="shangchuan" id="pickfiles"/>＋添加文件</button> 
                        <button type="button" class="webbtn" id="clearbtn" onclick="upclear()">－清除所有文件</button>
                          <button type="button" class="webbtn" onclick="colose()">关闭</button>
                     </td>
                     
                     <!--开始上传文件-->
                     <td align="right">
                        <button type="button" class="webbtn" id="uploadfiles" >开始上传</button>
                     </td>
                     
                  </tr>
               </tbody>
            </table>
            
            <div style="overflow:hidden; height:5px;"></div>
            <div class="mdiv" style="background-color:#eeeeee">
               <div class="div01">文件名</div>
               <div class="div02">大小</div>
               <div class="div03">状态</div>
            </div>
            <!--添加的文件放在upfile内部-->
            <div id="upfile">
               <div id="filelist"></div>
               <!--添加的文件开始-->

               <!--添加的文件结束-->
            </div>
         <div class="quebntha"><button type="button"  style="padding:5px 15px" class="webbtn" id="quebtn" onclick="upokla()">确定</button></div>
         </center>
      </div>

   </div>
</div>
<script type="text/javascript" 
     src="__INDEX__/uploadjs/plupload.full.min.js"></script>

 效果图:

 

js文件：

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',
    browse_button : 'pickfiles', // you can pass an id...
    container: document.getElementById('uploadwin_body'), // ... or DOM Element itself
    url : '/index/project/uploadfiles',
    flash_swf_url : '/static/index/uploadjs/Moxie.swf',
    silverlight_xap_url : '/static/index/uploadjs/Moxie.xap',

    filters : {
        max_file_size : '5mb',
        mime_types: [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"},
            {title : 'Office files',extensions : 'doc,docx,excel,ppt,txt,mpp,xls,xlsx,pdf'}
        ]
    },

    init: {
        PostInit: function() {
            document.getElementById('filelist').innerHTML = '';
            document.getElementById('uploadfiles').onclick = function() {
                uploader.start();
                return false;
            };
        },

   /* '+
    '*/
        FilesAdded: function(up, files) {
            plupload.each(files, function(file) {
                document.getElementById('filelist').innerHTML +='<div class="mdiv" id="' + file.id + '">'+
                                                    '<div class="div01">'+ file.name +'</div>'+
                                                    '<div class="div02">'+ plupload.formatSize(file.size) +'</div>'+
                                                    '<div class="div03" id="updeng1"><span class="baifen">等待上传...</span>'+
                                                    '<a href="javascript:" temp="del" onclick="delshang(this)">×</a>'+
                                                    '</div>'+
                                                    '</div>';
            });
        },

        UploadProgress: function(up, file) {
            document.getElementById(file.id).getElementsByClassName('baifen')[0].innerHTML =  "上传成功";
            document.getElementById(file.id).getElementsByTagName('a')[0].style.display =  "none";
        },

        Error: function(up, err) {
            document.getElementById('filelist').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
        }
    }
});

uploader.init();