zoukankan html css js c++ java

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" id="BasicInfor">
  2                     <div style="margin-top:10px;">
  3                         <input type="hidden" value="@Model.ProjectID" name="ProjectID" id="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" id="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" id="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" id="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" id="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" id="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" id="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" id="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" id="BeginDate_div">
 36                                         <input id="BeginDate" 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" id="EndDate_div">
 45                                         <input id="EndDate" 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" id="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" id="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" id="AccountAmount" /></td>
 70                             </tr>
 71                             <tr>
 72                                 <td class="td-right"><input type="checkbox" name="PatentState" id="PatentState" @(Model.PatentState ? "checked="checked"" : "") /> 是否申请专利 </td>
 73                                 <td colspan="3" class="td-padding15"><input type="checkbox" name="IdentifyState" id="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" id="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" id="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="" id="file_upload_begin_name" href="/Base/MyDownLoad?Filepath=@Model.BeginAttachmentPath" target="_blank">@Model.BeginAttachmentName</a>
 89                                     }
 90                                     else
 91                                     {
 92                                         <div id="file_upload_begin" class="file_upload"></div>
 93                                         <div id="" class="file_queue">
 94                                             <div class="file_queue_item  hidden" id="file_upload_begin_q">
 95                                                 <div class="cancel_item">
 96                                                     <a id="file_upload_begin_cancel" href="#" onclick="DelAttachment('file_upload_begin','@Model.BeginAttachmentName')">X</a>
 97                                                 </div>
 98                                                 <a class="" id="file_upload_begin_name" href="/Base/MyDownLoad?Filepath=@Model.BeginAttachmentPath" target="_blank">@Model.BeginAttachmentName</a>
 99                                             </div>
100                                         </div>
101                                     }
102                                     <input id="file_upload_begin_path" type="hidden" value="@Model.BeginAttachmentPath" />
103                                     <input id="file_upload_begin_guid" 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="" id="file_upload_end_name" href="/Base/MyDownLoad?Filepath=@Model.EndAttachmentPath" target="_blank">@Model.EndAttachmentName</a>
113                                     }
114                                     else
115                                     {
116                                         <div id="file_upload_end" class="file_upload"></div>
117                                         <div id="" class="file_queue">
118                                             <div class="file_queue_item  hidden" id="file_upload_end_q">
119                                                 <div class="cancel_item">
120                                                     <a id="file_upload_end_cancel" href="#" onclick="DelAttachment('file_upload_end','@Model.EndAttachmentName')">X</a>
121                                                 </div>
122                                                 <a class="" id="file_upload_end_name" href="/Base/MyDownLoad?Filepath=@Model.EndAttachmentPath" target="_blank">@Model.EndAttachmentName</a>
123                                             </div>
124                                         </div>
125 
126                                     }
127                                     <input id="file_upload_end_path" type="hidden" value="@Model.EndAttachmentPath" />
128                                     <input id="file_upload_end_guid" 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="" id="file_upload_contr_name" href="/Base/MyDownLoad?Filepath=@Model.ContractAttachmentPath" target="_blank">@Model.ContractAttachmentName</a>
137                                     }
138                                     else
139                                     {
140                                         <div id="file_upload_contr" class="file_upload"></div>
141                                         <div id="" class="file_queue">
142                                             <div class="file_queue_item  hidden" id="file_upload_contr_q">
143                                                 <div class="cancel_item">
144                                                     <a id="file_upload_contr_cancel" href="#" onclick="DelAttachment('file_upload_contr','@Model.ContractAttachmentName')">X</a>
145                                                 </div>
146                                                 <a class="" id="file_upload_contr_name" href="/Base/MyDownLoad?Filepath=@Model.ContractAttachmentPath" target="_blank">@Model.ContractAttachmentName</a>
147                                             </div>
148                                         </div>
149                                     }
150                                     <input id="file_upload_contr_path" type="hidden" value="@Model.ContractAttachmentPath" />
151                                     <input id="file_upload_contr_guid" 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);
         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- 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;
             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[id="' + file.id + '"]').find(".cancel a");
 2 var filedown = $('#' + dom.id + '-queue .uploadify-queue-item[id="' + file.id + '"]').find('a[class="fileName"]');
 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 }

查看全文

相关阅读:
前端之script标签注意事项
 前端之常用网址的整理
 前端之清除浮动
 三元表达式
 迭代器生成器
 文件处理流程
 python中常见的内置函数
 匿名函数lambda
模拟问路场景理解递归
 create auto increment row with select in postgreSQL

原文地址：https://www.cnblogs.com/xiaoerlang90/p/5206576.html