引入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();
时间： 2024-07-30 03:23:55