码迷,mamicode.com
首页 > 其他好文 > 详细

plupload 实例

时间:2017-09-20 14:30:41      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:下载地址   down   div   current   ram   bre   队列   tin   layout   

引入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();

 

plupload 实例

标签:下载地址   down   div   current   ram   bre   队列   tin   layout   

原文地址:http://www.cnblogs.com/tengfei8/p/7560728.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!