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,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
随机推荐
- mantis增加密码修改
解决方式就是考虑修改Mantisbt PHP程序,增加一个密码修改框,这样管理员就可以直接修改用户密码了. 操作步骤如下: 1) 修改文件 manage_user_edit_page.p ...
- 【LeetCode OJ】Interleaving String
Problem Link: http://oj.leetcode.com/problems/interleaving-string/ Given s1, s2, s3, find whether s3 ...
- JS-OC通信之Cordova简介
Cordova 是一个可以让 JS 与原生代码(包括 Android 的 java,iOS 的 Objective-C 等)互相通信的一个库,并且提供了一系列的插件类,比如 JS 直接操作本地数据库的 ...
- css3 动画贝塞尔曲线
http://cubic-bezier.com/#.17,.67,.83,.67 缓动函数速查表: http://www.xuanfengge.com/easeing/easeing/ Ceaser: ...
- mysql实现高效率随机取数据
从数据库中(mysql)随机获取几条数据很简单,但是如果一个表的数据基数很大,比如一千万,从一千万中随机产生10条数据,那就相当慢了,如果同时一百个人访问网站,处理这些个进程,对于一般的服务器来说,肯 ...
- 转：UniqueID和ClientID的来源
转:http://www.cnblogs.com/GrayZhang/archive/2009/03/05/how-uniqueid-is-generated.html 在<漫话ID>一文 ...
- mark资料-selenium断言的分类
操作(action).辅助(accessors)和断言(assertion): 操作action: 模拟用户与 Web 应用程序的交互. 辅助accessors: 这是辅助工具.用于检查应用程序的状态 ...
- 长方形—C++
编程之美一道简单的热身题,活生生的组合数学例子啊. 题意如下: 在 N 条水平线与 M 条竖直线构成的网格中,放 K 枚石子,每个石子都只能放在网格的交叉点上.问在最优的摆放方式下,最多能找到多少四边 ...
- C++ Primer：第八章：IO库(续)
二:文件输入输出. (1) 使用文件流对象: 头文件fstream定义了三个类型来支持文件IO:ifstream从一个给定的文件中读取数据,ofstream向一个给定的文件中写入数据,以及fstrea ...
- IOS开发之SWIFT
Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了 ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在其中 ...