plupload 实例

Posted 2020-10-07

引入js

<script type="text/javascript" src="/js/Uploadify/plupload.min.js"></script>

官网下载地址：http://www.plupload.com/download/

前台html代码

<div id="container">
         <a id="pickfiles" href="javascript:;">上传附件</a>
</div>

实例化plupload控件

  1 var fileNameList = [];//附件总列表
  2 var uploadSuccessList = [];//已上传附件列表
  3 var fileSizes = 0; //已在列表中附件总大小。
  4 var uploader = new plupload.Uploader({
  5         //runtimes: ‘gears,silverlight,html5‘,
  6         //runtimes : ‘html5,flash,silverlight,html4‘,//选择方式执行
  7         browse_button: ‘pickfiles‘, // 触发文件选择对话框的按钮，为那个元素id
  8         container: document.getElementById(‘container‘), // ... or DOM Element itself
  9         url: ‘/_Layouts/15/ApproveListHandler.aspx?Type=UpLoadAttachment‘, //服务器端的上传页面地址
 10         flash_swf_url: ‘/js/Uploadify/Moxie.swf‘, //swf文件，当需要使用swf方式进行上传时需要配置该参数
 11         max_file_size: ‘100mb‘,//限制为100MB
 12         filters: {
 13             //max_file_size: ‘100mb‘, //最大只能上传10mb的文件
 14             prevent_duplicates: true //不允许选取重复文件
 15         },//文件
 16         silverlight_xap_url: ‘/js/Uploadify/Moxie.xap‘, //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
 17         init: {
 18             PostInit: function () {
 19                 控件初始化完成后执行。                
 20             },
 21             FilesAdded: function (up, files) {
 22                 var isAdd = true;//判断是否有0字节附件。
 23                 var sizes = 0;//上传附件总大小。
 24                 var fileName="";
 25                 var currentSize=0;//每次上传的附件总大小。
 26                 var tempLength = files.length;
 27                 
 28                 for (var m = 0; m <= tempLength - 1; m++) {
 29                     var fileSize = files[m].size;
 30                         //判断附件是否为空
 31                     if(fileSize==0)
 32                     {
 33                         isAdd = false;
 34                         fileName=files[m].name;
 35                         break;
 36                     }
 37                     currentSize+=fileSize;    //计算本次上传附件总大小。              
 38                 }
 39 
 40                 //判断是否为0字节附件。为空附件不进行上传
 41                 if (!isAdd) {
 42             bulletFrame("附件  "+fileName+"  大小不能为空！");
 43                         for (var m = tempLength - 1; m >= 0; m--) {
 44                         uploader.removeFile(files[m].id);
 45                         files.splice(m, 1);
 46                     }
 47                 }
 48                 
 49         sizes += fileSizes + currentSize;     //上次附件大小+本次上传附件大小
 50                 
 51                 //总大小不超过200M
 52                 if (sizes > (200*1024*1024)) {
 53                     bulletFrame("附件总大小不能超过200M！");
 54                     //isAdd = false;
 55                     for (var m = tempLength - 1; m >= 0; m--) {
 56                         uploader.removeFile(files[m].id);
 57                         files.splice(m, 1);
 58                     }
 59                 }
 60    
 61                 附件大小不超过10个
 62                 var count = files.length + fileNameList.length;
 63                 if (count > 10) {
 64                     bulletFrame("附件数量不能超过10个！");
 65                     var addFile = files.length - (count - 10) - 1,
 66                     tempLength = files.length;
 67                     for (var m = tempLength - 1; m > addFile; m--) {
 68                         uploader.removeFile(files[m].id);
 69                         files.splice(m, 1);
 70                     }
 71                 }
 72 
 73                 plupload.each(files, function (file) {
 74                     var fSize = file.size;
 75                     fileSizes += fSize;
 76                     fileNameList.push(file.name);
 77                     $("#attTable").append("<tr class=‘attContent‘><td class=‘att_title‘ title=‘" + file.name + "‘>" + subString(file.name, 40) + "(" + plupload.formatSize(file.size) + ")" + "</td><td id=‘" + file.id + "‘ class=‘delTd‘><img src=‘/images/selected/list_delete.png‘></td></tr>");
 78                //删除队列中附件
 79                $("#" + file.id).click(function (q) {
 80                         $(this).parent().remove();
 81                         
 82                         for(var i=0;i<=fileNameList.length-1;i++){
 83                             if(fileNameList[i]==file.name){
 84                             fileNameList.splice(i,1);//删除已在列表中的附件
 85                             }
 86                         }
 87                         
 88                         var fSize = file.size;
 89                            
 90                             fileSizes -= fSize;//减少附件大小
 91                                                 
 92                         up.removeFile(file);
 93                         if ($("#attTable tr").length <= 3) {
 94                             $(".attDivContent").removeClass("attAddShow");
 95 
 96                             $(".att_title").removeClass("att_add_title");
 97                         }
 98                     });
 99 
100                 });
101 
102                 if ($("#attTable tr").length > 3) {
103                     $(".attDivContent").addClass("attAddShow");
104 
105                     $(".att_title").addClass("att_add_title");
106                 }
107             },
108 
109             FileUploaded: function (up, file, res) {
110                //上传成功后添加在列表
111                 uploadSuccessList.push(file.name);
112             },
113 
114             UploadComplete: function (up, file) {
115                 //附件是否全部上传
116                 if (uploadSuccessList.length != uploader.files.length) {
117                     bulletFrame("附件未全部上传，请删除上传失败的附件！");
118                     AttModal.close();
119                     return;
120                 }
121 
122                 var user = getUserInfo();
123                 var ccuser = getCCUserInfo();
124                 var txtContent = $("#txtContent").val().replace(/\n|\r\n/g, "<br />");
125                 $.ajax({
126                     type: "POST",
127                     dataType: "text",
128                     url: ‘/_Layouts/15/ApproveListHandler.aspx‘,      //提交到一般处理程序请求数据   
129                     data: "Type=AddApprove&itemTitle=" + $("#txtTitle").val() + "&itemContent=" + encodeURI(txtContent) + "&itemuser=" + user + "&itemccuser=" + ccuser + "&itemAtt=" + uploadSuccessList.join("*") + "&listName=" + listName + "&itemId=" + 0,          //提交参数           
130                     success: function (result) {
131                         if (result > 0) {
132                             //操作成功初始化参数
133                             AttModal.close(); 
134                             fileNameList = [];
135                             uploadSuccessList = [];
136                             fileSizes = 0;
137                             uploader.splice(0, uploader.files.length);
138 
139                             alert("操作成功！");
140                             
141                         }
142                         else {
143                             AttModal.close();
144                             alert("操作失败！");
145                         }
146                     }
147                 });
148 
149             },
150 
151             Error: function (up, err) {
152                 if (err.code == ‘-600‘) {
153                     bulletFrame("文件：" + err.file.name + "   大小不能超过100mb！");
154                 } else if (err.code == ‘-601‘) {
155                     bulletFrame("文件：" + err.file.name + "   上传的格式有误！");
156                 } else if (err.code == ‘-602‘) {
157                     bulletFrame("文件：" + err.file.name + "   文件名重复！");
158                 }
159                 else {
160                     bulletFrame("文件：" + err.file.name + "   " + err.message);
161                 }
162 
163 
164             }
165         }
166     });
167                 

   //在实例对象上调用init()方法进行初始化
    uploader.init();

  //执行方法：

  uploader.start();