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