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代码：
<div class="tab-pane fade in active" id="BasicInfor">
<div style="margin-top:10px;">
<input type="hidden" value="@Model.ProjectID" name="ProjectID" id="ProjectID" />
<table class="basicTable">
<tr>
<td class="td-right edu_width150"><span class="no_nullspan">*</span> 项目编号：</td>
<td class="td-padding15"><input type="text" class="scinputlong" value="@Model.ProjectCode" name="ProjectCode" id="ProjectCode" maxlength="20" /></td>
<td class="td-right"><span class="no_nullspan">*</span> 项目名称：</td>
<td class="td-padding15"><input type="text" class="scinputlong" value="@Model.ProjectName" name="ProjectName" id="ProjectName" maxlength="100" /></td>
</tr>
<tr>
<td class="td-right"><span class="no_nullspan">*</span> 企业名称：</td>
<td class="td-padding15"><input type="text" class="scinputlong" value="@Model.EnterpriseName" name="EnterpriseName" id="EnterpriseName" maxlength="30" /></td>
<td class="td-right"><span class="no_nullspan">*</span> 所属部门：</td>
<td class="td-padding15">
<select class="scselectlong" name="DepartmentID" id="DepartmentID" onchange="GetUser()"></select>
</tr>
<tr>
<td class="td-right"><span class="no_nullspan">*</span> 项目负责人：</td>
<td class="td-padding15">
<select class="scselectlong" name="Principal" id="Principal"></select>
</td>
<td class="td-right"><span class="no_nullspan">*</span> 对应专业：</td>
<td class="td-padding15">
<input type="text" class="scinputlong" name="MajorID" id="MajorID" value="@Model.MajorID" maxlength="15" />
</td>
</tr>
<tr>
<td class="td-right"><span class="no_nullspan">*</span> 项目类型：</td>
<td class="td-padding15">
<select class="scselectlong" name="ProjectTypeID" id="ProjectTypeID"></select>
</td>
<td class="td-right"><span class="no_nullspan">*</span> 立项时间：</td>
<td class="td-padding15">
<div class="input-group date form_date" id="BeginDate_div">
<input id="BeginDate" name="BeginDate" class="scinputtimelong" size="16" type="text" value="@Model.BeginDate.ToString("yyyy-MM-dd")" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</td>
</tr>
<tr>
<td class="td-right">结项时间：</td>
<td class="td-padding15">
<div class="input-group date form_date" id="EndDate_div">
<input id="EndDate" name="EndDate" class="scinputtimelong" size="16" type="text" value="@(Model.EndDate == null?"":Model.EndDate.Value.ToString("yyyy-MM-dd"))" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</td>
<td class="td-right"><span class="no_nullspan">*</span> 项目状态：</td>
<td class="td-padding15">
<select class="scselectlong" name="ProjectState" id="ProjectState">
@if (Model.ProjectState == 2)
{
<option value="1">立项</option>
<option value="2" selected>结项</option>
}
else
{
<option value="1" selected>立项</option>
<option value="2">结项</option>
}
</select>
</td>
</tr>
<tr>
<td class="td-right"><span class="no_nullspan">*</span> 合同经费(万元)：</td>
<td class="td-padding15"><input type="text" class="scinputlong" value="@Model.ContartAmount.ToString("0.###")" name="ContartAmount" id="ContartAmount" maxlength="19" /></td>
<td class="td-right">到账经费(万元)：</td>
<td class="td-padding15"><input type="text" class="scinputlong" value="@Model.AccountAmount.ToString("0.###")" readonly="readonly" name="AccountAmount" id="AccountAmount" /></td>
</tr>
<tr>
<td class="td-right"><input type="checkbox" name="PatentState" id="PatentState" @(Model.PatentState ? "checked=\"checked\"" : "") /> 是否申请专利 </td>
<td colspan="3" class="td-padding15"><input type="checkbox" name="IdentifyState" id="IdentifyState" @(Model.IdentifyState ? "checked=\"checked\"" : "") /> 是否科委鉴定 </td>
</tr>
<tr>
<td class="td-right"><span class="no_nullspan">*</span> 项目负责人职称：</td>
<td class="td-padding15">
<select class="scselectlong" name="PositionalTitles" id="PositionalTitles"></select>
</td>
<td class="td-right">备注：</td>
<td class="td-padding15"><input type="text" class="scinputlong" value="@Model.Note" name="Note" id="Note" maxlength="250" /></td>
</tr>
<tr>
<td class="td-right"><span class="no_nullspan">*</span> 立项附件：</td>
<td class="td-padding15" colspan="3">
@if (Model.ProjectState == 2)
{
<a class="" id="file_upload_begin_name" href="/Base/MyDownLoad?Filepath=@Model.BeginAttachmentPath" target="_blank">@Model.BeginAttachmentName</a>
}
else
{
<div id="file_upload_begin" class="file_upload"></div>
<div id="" class="file_queue">
<div class="file_queue_item hidden" id="file_upload_begin_q">
<div class="cancel_item">
<a id="file_upload_begin_cancel" href="#" onclick="DelAttachment('file_upload_begin','@Model.BeginAttachmentName')">X</a>
</div>
<a class="" id="file_upload_begin_name" href="/Base/MyDownLoad?Filepath=@Model.BeginAttachmentPath" target="_blank">@Model.BeginAttachmentName</a>
</div>
</div>
}
<input id="file_upload_begin_path" type="hidden" value="@Model.BeginAttachmentPath" />
<input id="file_upload_begin_guid" type="hidden" value="@Model.BeginAttachmentID" />
</td> </tr>
<tr>
<td class="td-right"><span class="no_nullspan">*</span> 结项附件：</td>
<td class="td-padding15" colspan="3">
@if (Model.ProjectState == 2)
{
<a class="" id="file_upload_end_name" href="/Base/MyDownLoad?Filepath=@Model.EndAttachmentPath" target="_blank">@Model.EndAttachmentName</a>
}
else
{
<div id="file_upload_end" class="file_upload"></div>
<div id="" class="file_queue">
<div class="file_queue_item hidden" id="file_upload_end_q">
<div class="cancel_item">
<a id="file_upload_end_cancel" href="#" onclick="DelAttachment('file_upload_end','@Model.EndAttachmentName')">X</a>
</div>
<a class="" id="file_upload_end_name" href="/Base/MyDownLoad?Filepath=@Model.EndAttachmentPath" target="_blank">@Model.EndAttachmentName</a>
</div>
</div> }
<input id="file_upload_end_path" type="hidden" value="@Model.EndAttachmentPath" />
<input id="file_upload_end_guid" type="hidden" value="@Model.EndAttachmentID" />
</td>
</tr>
<tr>
<td class="td-right"><span class="no_nullspan">*</span> 合同附件：</td>
<td class="td-padding15" colspan="3">
@if (Model.ProjectState == 2)
{
<a class="" id="file_upload_contr_name" href="/Base/MyDownLoad?Filepath=@Model.ContractAttachmentPath" target="_blank">@Model.ContractAttachmentName</a>
}
else
{
<div id="file_upload_contr" class="file_upload"></div>
<div id="" class="file_queue">
<div class="file_queue_item hidden" id="file_upload_contr_q">
<div class="cancel_item">
<a id="file_upload_contr_cancel" href="#" onclick="DelAttachment('file_upload_contr','@Model.ContractAttachmentName')">X</a>
</div>
<a class="" id="file_upload_contr_name" href="/Base/MyDownLoad?Filepath=@Model.ContractAttachmentPath" target="_blank">@Model.ContractAttachmentName</a>
</div>
</div>
}
<input id="file_upload_contr_path" type="hidden" value="@Model.ContractAttachmentPath" />
<input id="file_upload_contr_guid" type="hidden" value="@Model.ContractAttachmentID" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
@if (Model.ProjectState == 2)
{
<button class="scbtn" onclick="">
保存
</button>
}
else
{
<button class="scbtn addBtn" onclick="SaveBasicInfor()">
保存
</button>
}
</div>
</div>
4.将公用的js提到单独的js文件中（引用到页面结尾），代码如下：
var typeFlag = '';
var fileTypeExt = '*.*'; /*
* 附件上传
*/
$(function () {
var strPath = '';
$('.file_upload').each(function (index, dom) {
/*
* 判断上传附件类型
*/
if (typeFlagArray != undefined && typeFlagArray.length > 0){
if (typeFlagArray.length === 1){
typeFlag = typeFlagArray[0];
}
else if (typeFlagArray.length > index) {
typeFlag=typeFlagArray[index];
}
}
if (!IsNullOrEmptyOrUndefined(typeFlag)) {
switch (typeFlag) {
case '1'://文档类型
fileTypeExt = '*.doc;*.txt;*.ppt;*.xls;*.docx;*.xlsx;*.rar;*.zip;*.pdf';
break;
case '2'://图片类型
fileTypeExt = '*.jpg;*.jpeg;*.png';
break;
case '3'://flash 三维动画
fileTypeExt = '*.swf;*.flv';
break;
case '4':// pdf 文档
fileTypeExt = '*.pdf';
break;
default:
alert("初始化附件类型错误！");
return false;
}
} $(dom).uploadify({
'swf': '/Scripts/UploadsFile/uploadify.swf',
'buttonText': buttonText,
'auto': true,
'multi': false,
//'uploadLimit': 1,
'queueSizeLimit': 1,
'fileTypeExts': fileTypeExt,
'formData': { 'typeFlag': typeFlag },//此处修改附件类型
'uploader': '/Base/uploadsAttachment',
'fileSizeLimit': '30MB',
//'removeCompleted':false,//上传完成后jquery提供的文件显示是否自动消失
'removeTimeout':0,/上传完成后jquery提供的文件显示自动消失延时时间
'overrideEvents': ['onSelectError', 'onDialogClose'],//重写onSelectError事件
'onSelectError': function (file, errorCode, errorMsg) {
switch (errorCode) {
//-100
case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
alert("上传的文件数量已经超出系统限制的" + this.settings.queueSizeLimit + "个文件！");
break;
//-110
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
alert("文件 [" + file.name + "] 大小超出系统限制的" + this.settings.fileSizeLimit + "大小！");
break;
//-120
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
alert("文件 [" + file.name + "] 大小异常！");
break;
}
},
'onUploadComplete': function (file) {
$('#' + dom.id).addClass("hidden");
},
'onQueueComplete': function (data) {
},
'onUploadSuccess': function (file, data, response) {
//$('#' + file.id).find('.data').html(' 上传完毕');
var result = eval('(' + data + ')');
if (result.Success) {
var cancel = $('#' + dom.id + '_cancel');
var filedown = $('#' + dom.id + '_name'); if (filedown) {
filedown.text(result.FileName);
filedown[0].href = "/Base/MyDownLoad?Filepath=" + result.tempfilesPath;//临时文件夹路径
$('#' + dom.id + '_path').val(result.filesPath);//正式文件夹路径
$('#' + dom.id + '_guid').val(result.guid); $('#' + dom.id + '_q').removeClass("hidden");
};
if (cancel) {
cancel[0].onclick = function () {
DelAttachment(dom.id, result.FileName);
};
};
}
else {
alert("上传文件失败：" + result.Message)
}
},
'onUploadError': function (file, errorCode, errorMsg, errorString, swfuploadifyQueue) {
alert("error");
},
'onCancel': function (event, ID, fileObj, data) {
alert("cancel");
},
}); //显示隐藏上传按钮，文件信息
var domfile= $('#' + dom.id + '_guid').val();
if (IsNullOrEmptyOrUndefined(domfile)) {
$('#' + dom.id + '_q').addClass("hidden");
$('#' + dom.id).removeClass("hidden");
}
else {
$('#' + dom.id + '_q').removeClass("hidden");
$('#' + dom.id).addClass("hidden");
}
})
}); /*
* 删除附件
*/
function DelAttachment(domID, fileName) {
if (confirm("您确认要删除附件【" + fileName + "】吗？删除点击“保存”后生效！")) {
$('#' + domID+'_name').text("");
$('#' + domID+'_name')[0].href = "#";
$('#' + domID + '_path').val('');
$('#' + domID + '_guid').val('');
$('#' + domID + '_q').addClass("hidden");
$('#' + domID).removeClass("hidden");
}
}
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生成的附件信息显示块中的删除事件：
var cancel = $('#' + dom.id + '-queue .uploadify-queue-item[id="' + file.id + '"]').find(".cancel a");
var filedown = $('#' + dom.id + '-queue .uploadify-queue-item[id="' + file.id + '"]').find('a[class="fileName"]');
if (filedown) {
filedown[0].href = "#";
filedown.click(function (filepath) {
alert("测试下载");
//在这此处处理...
})
}
if (cancel) {
//cancel.attr("rel", obj.Id);
cancel[0].href = "#";
cancel.click(function () {
if (confirm("您确认要删除该附件吗？")) {
alert("删除");
$('#' + dom.id + '_name').text();
$('#' + dom.id + '_path').val();
$('#' + dom.id + '_guid').val();
$('#' + dom.id).uploadify('cancel', file.id);
}
//在这此处处理...
})
}
JQuery Uplodify上传附件（同一个页面多个uplodify控件解决方案）的更多相关文章
- JQuery文件上传插件uploadify在MVC中Session丢失的解决方案
<script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthenticati ...
- c#上传文件（一）使用 .net 控件上传文件
1.html代码: <body> <form id="form1" runat="server"> <div> <as ...
- jquery 通过ajax FormData 对象上传附件
之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div> 流程图: <input id=& ...
- Dynamic CRM 2013学习笔记（十三）附件上传 / 上传附件
上传附件可能是CRM里比较常用的一个需求了,本文将介绍如何在CRM里实现附件的上传.显示及下载.包括以下几个步骤: 附件上传的web页面 附件显示及下载的附件实体 调用上传web页面的JS文件 实体上 ...
- DTCMS中部分IE8不支持webupload上传附件的控件，更改为ajaxfileupload
dialog\dialog_attach.aspx <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- webservice跨服务器上传附件
最近一个项目,用到文件上传功能,本来简单地使用upload控件直接post到服务器保存,简单实现了.后来考虑到分布是部署,静态附件.图片等内容要单独服务器(命名为B服务器,一台,192.168.103 ...
- React项目中使用wangeditor以及扩展上传附件菜单
在最近的工作中需要用到富文本编辑器,结合项目的UI样式以及业务需求,选择了wangEditor.另外在使用的过程中发现wangEditor只有上传图片和视频的功能,没有上传文本附件的功能,所以需要对其 ...
- jQuery文件上传插件Uploadify（转）
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
随机推荐
- 【Tsinghua OJ】隧道(Tunel)问题
描述 现有一条单向单车道隧道,每一辆车从隧道的一端驶入,另一端驶出,不允许超车 该隧道对车辆的高度有一定限制,在任意时刻,管理员希望知道此时隧道中最高车辆的高度是多少 现在请你维护这条隧道的车辆进出记 ...
- HTTP请求错误大全
HTTP 400 - 请求无效HTTP 401.1 - 未授权:登录失败 HTTP 401.2 - 未授权:服务器配置问题导致登录失败 HTTP 401.3 - ACL 禁止访问资源 HTTP 401 ...
- iptables_forward
FORWARD 好了,我们接着往下走,这个包已经过了两个PREROUTING链了,这个时候,出现了一个分支转折的地方,也就是图中下方的那个菱形(FORWARD),转发!这里有一个对目的地址的判断(这里 ...
- Euro Efficiency_完全背包
Description On January 1st 2002, The Netherlands, and several other European countries abandoned the ...
- 设置dt height 保证dd在同一行
<html> <head> <meta charset="UTF-8"> <meta name="Author&qu ...
- ZOJ 3811
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5343 网络赛这水题没写过太伤了,赛后写了下1A. 当时钻牛角尖一定要用k次bf ...
- 表视图控制器(TableViewController)(三) 、 表视图搜索
1 乐库的设置界面 1.1 问题 tableView分为静态(static)和动态(dynamic),之前使用的都是动态的tableView,表视图的有多少分区.有多少行以及每一行显示的内容都不是固定 ...
- CollectionsAPI
鉴于总用,总结一下: 类别 方法 查找 binarySearch. 返回 enumeration.checkedSortedMap 判断 max.min 移动 reverse(List).revers ...
- iOS平台网络类型检测
老大新增个需求,连接服务器时要区分内外网,需求理解了,现实很骨感啊,没办法,干. #import <Foundation/Foundation.h> /* 依赖于以下Framework S ...
- C语言学习笔记 -冒泡排序
//冒泡排序 void main(){ , , , , }; ]); ; i<max - ; i++) { for (int j = i; j<max; j++) { if (a[i]&g ...