JQuery Uplodify上传附件，同一个页面多个uplodify控件解决方案
功能描述：实现同一页面中多个不同附件的上传保存，且做到最大程度的减少代码修改量（最大程度的公用），为了方便实现垃圾数据和垃圾文件的处理，项目采用临时文件夹的方式：即：文件自动上传先保存到临时文件夹下，在保存数据之后移动文件到正式目录，页面上对附件的所有操作只有用户点击“保存”后起效。插件名称及版本：Uploadify v3.1.1。
解决方案：
1.引用（页面开头）：
<link href="~/Scripts/UploadsFile/uploadify.css" rel="stylesheet" />
<script src="~/Scripts/UploadsFile/jquery.uploadify.js"></script>2.页面中添加js代码：
/*
* 添加附件用
*/
var typeFlagArray = ['1'];// 附件类型，同一页面多种类型时用数组按页面中的顺序依次写入数组，只有一种类型时只需写一个就可以
var buttonText = '上 传'; // 上传附件按钮显示的文本3.页面html代码：
1 <div class="tab-pane fade in active" >
2 <div >
3 <input type="hidden" value="@Model.ProjectID" name="ProjectID" />
4 <table class="basicTable">
5 <tr>
6 <td class="td-right edu_width150"><span class="no_nullspan">*</span> 项目编号：</td>
7 <td class="td-padding15"><input type="text" class="scinputlong" value="@Model.ProjectCode" name="ProjectCode" maxlength="20" /></td>
8 <td class="td-right"><span class="no_nullspan">*</span> 项目名称：</td>
9 <td class="td-padding15"><input type="text" class="scinputlong" value="@Model.ProjectName" name="ProjectName" maxlength="100" /></td>
10 </tr>
11 <tr>
12 <td class="td-right"><span class="no_nullspan">*</span> 企业名称：</td>
13 <td class="td-padding15"><input type="text" class="scinputlong" value="@Model.EnterpriseName" name="EnterpriseName" maxlength="30" /></td>
14 <td class="td-right"><span class="no_nullspan">*</span> 所属部门：</td>
15 <td class="td-padding15">
16 <select class="scselectlong" name="DepartmentID" onchange="GetUser()"></select>
17 </tr>
18 <tr>
19 <td class="td-right"><span class="no_nullspan">*</span> 项目负责人：</td>
20 <td class="td-padding15">
21 <select class="scselectlong" name="Principal" ></select>
22 </td>
23 <td class="td-right"><span class="no_nullspan">*</span> 对应专业：</td>
24 <td class="td-padding15">
25 <input type="text" class="scinputlong" name="MajorID" value="@Model.MajorID" maxlength="15" />
26 </td>
27 </tr>
28 <tr>
29 <td class="td-right"><span class="no_nullspan">*</span> 项目类型：</td>
30 <td class="td-padding15">
31 <select class="scselectlong" name="ProjectTypeID" ></select>
32 </td>
33 <td class="td-right"><span class="no_nullspan">*</span> 立项时间：</td>
34 <td class="td-padding15">
35 <div class="input-group date form_date" >
36 <input name="BeginDate" class="scinputtimelong" size="16" type="text" value="@Model.BeginDate.ToString("yyyy-MM-dd")" readonly>
37 <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
38 </div>
39 </td>
40 </tr>
41 <tr>
42 <td class="td-right">结项时间：</td>
43 <td class="td-padding15">
44 <div class="input-group date form_date" >
45 <input name="EndDate" class="scinputtimelong" size="16" type="text" value="@(Model.EndDate == null?"":Model.EndDate.Value.ToString("yyyy-MM-dd"))" readonly>
46 <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
47 </div>
48 </td>
49 <td class="td-right"><span class="no_nullspan">*</span> 项目状态：</td>
50 <td class="td-padding15">
51 <select class="scselectlong" name="ProjectState" >
52 @if (Model.ProjectState == 2)
53 {
54 <option value="1">立项</option>
55 <option value="2" selected>结项</option>
56 }
57 else
58 {
59 <option value="1" selected>立项</option>
60 <option value="2">结项</option>
61 }
62 </select>
63 </td>
64 </tr>
65 <tr>
66 <td class="td-right"><span class="no_nullspan">*</span> 合同经费(万元)：</td>
67 <td class="td-padding15"><input type="text" class="scinputlong" value="@Model.ContartAmount.ToString("0.###")" name="ContartAmount" maxlength="19" /></td>
68 <td class="td-right">到账经费(万元)：</td>
69 <td class="td-padding15"><input type="text" class="scinputlong" value="@Model.AccountAmount.ToString("0.###")" readonly="readonly" name="AccountAmount" /></td>
70 </tr>
71 <tr>
72 <td class="td-right"><input type="checkbox" name="PatentState" @(Model.PatentState ? "checked=\"checked\"" : "") /> 是否申请专利 </td>
73 <td colspan="3" class="td-padding15"><input type="checkbox" name="IdentifyState" @(Model.IdentifyState ? "checked=\"checked\"" : "") /> 是否科委鉴定 </td>
74 </tr>
75 <tr>
76 <td class="td-right"><span class="no_nullspan">*</span> 项目负责人职称：</td>
77 <td class="td-padding15">
78 <select class="scselectlong" name="PositionalTitles" ></select>
79 </td>
80 <td class="td-right">备注：</td>
81 <td class="td-padding15"><input type="text" class="scinputlong" value="@Model.Note" name="Note" maxlength="250" /></td>
82 </tr>
83 <tr>
84 <td class="td-right"><span class="no_nullspan">*</span> 立项附件：</td>
85 <td class="td-padding15" colspan="3">
86 @if (Model.ProjectState == 2)
87 {
88 <a class="" href="/Base/MyDownLoad?Filepath=@Model.BeginAttachmentPath" target="_blank">@Model.BeginAttachmentName</a>
89 }
90 else
91 {
92 <div class="file_upload"></div>
93 <div class="file_queue">
94 <div class="file_queue_item hidden" >
95 <div class="cancel_item">
96 <a href="#" onclick="DelAttachment('file_upload_begin','@Model.BeginAttachmentName')">X</a>
97 </div>
98 <a class="" href="/Base/MyDownLoad?Filepath=@Model.BeginAttachmentPath" target="_blank">@Model.BeginAttachmentName</a>
99 </div>
100 </div>
101 }
102 <input type="hidden" value="@Model.BeginAttachmentPath" />
103 <input type="hidden" value="@Model.BeginAttachmentID" />
104 </td>
105
106 </tr>
107 <tr>
108 <td class="td-right"><span class="no_nullspan">*</span> 结项附件：</td>
109 <td class="td-padding15" colspan="3">
110 @if (Model.ProjectState == 2)
111 {
112 <a class="" href="/Base/MyDownLoad?Filepath=@Model.EndAttachmentPath" target="_blank">@Model.EndAttachmentName</a>
113 }
114 else
115 {
116 <div class="file_upload"></div>
117 <div class="file_queue">
118 <div class="file_queue_item hidden" >
119 <div class="cancel_item">
120 <a href="#" onclick="DelAttachment('file_upload_end','@Model.EndAttachmentName')">X</a>
121 </div>
122 <a class="" href="/Base/MyDownLoad?Filepath=@Model.EndAttachmentPath" target="_blank">@Model.EndAttachmentName</a>
123 </div>
124 </div>
125
126 }
127 <input type="hidden" value="@Model.EndAttachmentPath" />
128 <input type="hidden" value="@Model.EndAttachmentID" />
129 </td>
130 </tr>
131 <tr>
132 <td class="td-right"><span class="no_nullspan">*</span> 合同附件：</td>
133 <td class="td-padding15" colspan="3">
134 @if (Model.ProjectState == 2)
135 {
136 <a class="" href="/Base/MyDownLoad?Filepath=@Model.ContractAttachmentPath" target="_blank">@Model.ContractAttachmentName</a>
137 }
138 else
139 {
140 <div class="file_upload"></div>
141 <div class="file_queue">
142 <div class="file_queue_item hidden" >
143 <div class="cancel_item">
144 <a href="#" onclick="DelAttachment('file_upload_contr','@Model.ContractAttachmentName')">X</a>
145 </div>
146 <a class="" href="/Base/MyDownLoad?Filepath=@Model.ContractAttachmentPath" target="_blank">@Model.ContractAttachmentName</a>
147 </div>
148 </div>
149 }
150 <input type="hidden" value="@Model.ContractAttachmentPath" />
151 <input type="hidden" value="@Model.ContractAttachmentID" />
152 </td>
153 </tr>
154 </table>
155 </div>
156 <div class="modal-footer">
157 @if (Model.ProjectState == 2)
158 {
159 <button class="scbtn" onclick="">
160 保存
161 </button>
162 }
163 else
164 {
165 <button class="scbtn addBtn" onclick="SaveBasicInfor()">
166 保存
167 </button>
168 }
169 </div>
170 </div>4.将公用的js提到单独的js文件中（引用到页面结尾），代码如下：
1 var typeFlag = '';
2 var fileTypeExt = '*.*';
3
4 /*
5 * 附件上传
6 */
7 $(function () {
8 var strPath = '';
9 $('.file_upload').each(function (index, dom) {
10 /*
11 * 判断上传附件类型
12 */
13 if (typeFlagArray != undefined && typeFlagArray.length > 0){
14 if (typeFlagArray.length === 1){
15 typeFlag = typeFlagArray[0];
16 }
17 else if (typeFlagArray.length > index) {
18 typeFlag=typeFlagArray[index];
19 }
20 }
21 if (!IsNullOrEmptyOrUndefined(typeFlag)) {
22 switch (typeFlag) {
23 case '1'://文档类型
24 fileTypeExt = '*.doc;*.txt;*.ppt;*.xls;*.docx;*.xlsx;*.rar;*.zip;*.pdf';
25 break;
26 case '2'://图片类型
27 fileTypeExt = '*.jpg;*.jpeg;*.png';
28 break;
29 case '3'://flash 三维动画
30 fileTypeExt = '*.swf;*.flv';
31 break;
32 case '4':// pdf 文档
33 fileTypeExt = '*.pdf';
34 break;
35 default:
36 alert("初始化附件类型错误！");
37 return false;
38 }
39 }
40
41 $(dom).uploadify({
42 'swf': '/Scripts/UploadsFile/uploadify.swf',
43 'buttonText': buttonText,
44 'auto': true,
45 'multi': false,
46 //'uploadLimit': 1,
47 'queueSizeLimit': 1,
48 'fileTypeExts': fileTypeExt,
49 'formData': { 'typeFlag': typeFlag },//此处修改附件类型
50 'uploader': '/Base/uploadsAttachment',
51 'fileSizeLimit': '30MB',
52 //'removeCompleted':false,//上传完成后jquery提供的文件显示是否自动消失
'removeTimeout':0,/上传完成后jquery提供的文件显示自动消失延时时间
53 'overrideEvents': ['onSelectError', 'onDialogClose'],//重写onSelectError事件
54 'onSelectError': function (file, errorCode, errorMsg) {
55 switch (errorCode) {
56 //-100
57 case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
58 alert("上传的文件数量已经超出系统限制的" + this.settings.queueSizeLimit + "个文件！");
59 break;
60 //-110
61 case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
62 alert("文件 [" + file.name + "] 大小超出系统限制的" + this.settings.fileSizeLimit + "大小！");
63 break;
64 //-120
65 case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
66 alert("文件 [" + file.name + "] 大小异常！");
67 break;
68 }
69 },
70 'onUploadComplete': function (file) {
71 $('#' + dom.id).addClass("hidden");
72 },
73 'onQueueComplete': function (data) {
74 },
75 'onUploadSuccess': function (file, data, response) {
76 //$('#' + file.id).find('.data').html(' 上传完毕');
77 var result = eval('(' + data + ')');
78 if (result.Success) {
79 var cancel = $('#' + dom.id + '_cancel');
80 var filedown = $('#' + dom.id + '_name');
81
82 if (filedown) {
83 filedown.text(result.FileName);
84 filedown[0].href = "/Base/MyDownLoad?Filepath=" + result.tempfilesPath;//临时文件夹路径
85 $('#' + dom.id + '_path').val(result.filesPath);//正式文件夹路径
86 $('#' + dom.id + '_guid').val(result.guid);
87
88 $('#' + dom.id + '_q').removeClass("hidden");
89 };
90 if (cancel) {
91 cancel[0].onclick = function () {
92 DelAttachment(dom.id, result.FileName);
93 };
94 };
95 }
96 else {
97 alert("上传文件失败：" + result.Message)
98 }
99 },
100 'onUploadError': function (file, errorCode, errorMsg, errorString, swfuploadifyQueue) {
101 alert("error");
102 },
103 'onCancel': function (event, ID, fileObj, data) {
104 alert("cancel");
105 },
106 });
107
108 //显示隐藏上传按钮，文件信息
109 var domfile= $('#' + dom.id + '_guid').val();
110 if (IsNullOrEmptyOrUndefined(domfile)) {
111 $('#' + dom.id + '_q').addClass("hidden");
112 $('#' + dom.id).removeClass("hidden");
113 }
114 else {
115 $('#' + dom.id + '_q').removeClass("hidden");
116 $('#' + dom.id).addClass("hidden");
117 }
118 })
119 });
120
121 /*
122 * 删除附件
123 */
124 function DelAttachment(domID, fileName) {
125 if (confirm("您确认要删除附件【" + fileName + "】吗？删除点击“保存”后生效！")) {
126 $('#' + domID+'_name').text("");
127 $('#' + domID+'_name')[0].href = "#";
128 $('#' + domID + '_path').val('');
129 $('#' + domID + '_guid').val('');
130 $('#' + domID + '_q').addClass("hidden");
131 $('#' + domID).removeClass("hidden");
132 }
133 }5.样式重写：
.uploadify-queue {
float: left;
}
.uploadify {
float: left;
}
.uploadify-button {
background-color: #87d6ff;
background-image: -moz-linear-gradient(center bottom, #87d6ff 0%, #87d6ff 100%);
background-position: center top;
background-repeat: no-repeat;
border: 2px solid #87d6ff;
border-radius: 30px;
color: #fff;
font: bold 12px Arial,Helvetica,sans-serif;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
width: 100%;
}
.uploadify-button :hover {
background-color: #87d6ff;
background-image: -moz-linear-gradient(center bottom, #87d6ff 0%, #87d6ff 100%);
}
.file_queue {
float: left;
margin-bottom: 1em;
}
.file_queue_item {
background-color: #f5f5f5;
border-radius: 3px;
font: 11px Verdana,Geneva,sans-serif;
margin-top: 5px;
max-width: 350px;
padding: 10px;
}
.file_queue_item .cancel_item a {
/*background: rgba(0, 0, 0, 0) url("uploadify-cancel.png") no-repeat scroll 0 0;*/
float: right;
height: 16px;
width: 16px;
color: #555;
}遇到的问题及总结：
1.当上传按钮隐藏的js操作写在onUploadSuccess事件中时，页面上传完附件后jquery生成的附件信息显示块不会自动消失，页面js报错。
解决方案：将对上传按钮的隐藏操作“ $('#' + dom.id).addClass("hidden");”写到onUploadComplete事件中：
2.文件大小限制问题：当上传文件超过9M时就会报错，上传失败；
解决方案：.net本身有对上传文件的大小限制，修改配置文件<system.web>节点下的<httpRuntime targetFramework="4.6" />为（至少大于或等于上传插件中配置的文件大小）：
<system.web>
<compilation debug="true" targetFramework="4.6" />
<httpRuntime maxRequestLength="51200" targetFramework="4.6" />
</system.web>3.重写jquery生成的附件信息显示块中的删除事件：
1 var cancel = $('#' + dom.id + '-queue .uploadify-queue-item[>);
2 var filedown = $('#' + dom.id + '-queue .uploadify-queue-item[>);
3
4 if (filedown) {
5 filedown[0].href = "#";
6 filedown.click(function (filepath) {
7 alert("测试下载");
8 //在这此处处理...
9 })
10 }
11
12 if (cancel) {
13 //cancel.attr("rel", obj.Id);
14 cancel[0].href = "#";
15 cancel.click(function () {
16 if (confirm("您确认要删除该附件吗？")) {
17 alert("删除");
18
19 $('#' + dom.id + '_name').text();
20 $('#' + dom.id + '_path').val();
21 $('#' + dom.id + '_guid').val();
22
23 $('#' + dom.id).uploadify('cancel', file.id);
24 }
25 //在这此处处理...
26 })
27 }