趁着近段的空闲时间，开发任务不是很重，就一直想把以前在仓促时间里所写的多文件上传功能改一下，在网上找了很多例子，觉得uploadify还可以，就想用它来试试。实现自己想要的功能。根据官网的开发文档，同时借鉴别人的经验，经过断断续续的修改（中间一直被安排其它事），把uploadify默认的样式改，同时把共性都封装了一下，最终完工了。
1.在_Layout.cshtml 页面中引入js文件和CSS文件：
@*-------上传文件--------*@
<link href="@Url.Content("~/Scripts/uploadify/css/uploadify.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/JSScript/upload.js")"></script>
<script src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-1.7..min.js")" type="text/javascript"></script>
引入文件
2.我把每个页面都用到的方法封装在upload.js文件里，同时对各个相关的属性都作了解释（最主要的是 'swf': '/Scripts/uploadify/uploadify.swf'这个的路径要正确）：
function upload(config) {
$("#" + config.id).uploadify({
'method': config.method ? config.method : 'post',//默认是’post’,可以设置为’get’
'formData': config.formData,
'swf': '/Scripts/uploadify/uploadify.swf', //关键的路径要正确
'uploader': '/HanNeng/Upload',
'buttonClass': config.buttonClass ? config.buttonClass : null, //额外增加的上传按钮样式类型
'buttonImage': config.buttonImage ? config.buttonImage : null, //按钮的背景图片
'buttonText': config.buttonText ? config.buttonText : '选择文件',//按钮显示的文字
'auto': config.auto ? config.auto : true, //选择文件后是否自动上传，默认是true,为自动上传
'height': config.width ? config.width : , //按钮的高度
'width': config.width ? config.width : , //按钮的宽度
'fileTypeDesc': config.fileTypeDesc, //文件类型的说明
'fileTypeExts': config.fileTypeExts, //指定允许上传的文件类型,默认*.*
'fileSizeLimit': config.fileSizeLimit, //上传文件大小限制，默认单位是KB，若需要限制大小在100KB以内， 可设置该属性为：‘100KB’
'removeTimeout': , //上传完成后的进度条的显示时间
'queueSizeLimit': config.queueSizeLimit, //上传队列长度限制，一次最多可上传多少个文件
'overrideEvents': ['onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError'], //不弹出默认的提示信息
'onSWFReady': config.sfdisable == true ? uploadify_onSWFReady : null, //如果有disable参数且为true时，就禁用掉上传功能
'onUploadStart': function (file) { //在一个文件开始上传之前触发。
$("#" + config.id).uploadify("settings", config.formKey, config.formData);
},
'onSelect': uploadify_onSelect, //选择文件后触发
'onSelectError': uploadify_onSelectError, //选择文件后出错时触发
'onUploadError': uploadify_onUploadError,//上传文件失败触发
'onUploadSuccess': uploadify_onUploadSuccess //在每一个文件上传成功后触发
});
}
//选择文件错误调用的方法
var uploadify_onSelectError = function (file, errorCode, errorMsg) {
var msgText = "上传失败,原因：\n\n";
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
msgText += " 每次上传的文件数量最多只可上传 " + this.settings.queueSizeLimit + "个文件！\n";
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
msgText += " 文件 【" + file.name + "】 大小超过系统限制的( " + this.settings.fileSizeLimit + " )大小！\n";
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
msgText += " 文件 【" + file.name + "】 大小为0，不可上传！\n";
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
msgText += " 所选文件 【" + file.name + "】 的格式不正确，仅限上传（" + this.settings.fileTypeExts + "）的文件格式！\n";
break;
default:
msgText += "错误代码：" + errorCode + "\n" + errorMsg;
}
art.dialog.alert(msgText);
}
//文件上传错误调用的方法
var uploadify_onUploadError = function (file, errorCode, errorMsg, errorString) {
// 手工取消不弹出提示
if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED
|| errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
return;
}
var msgText = "上传失败\n\n";
switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
msgText += " HTTP 错误\n" + errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
msgText += " 上传文件 【" + file.name + "】 丢失，请重新上传！\n";
break;
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
msgText += " IO错误！\n";
break;
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
msgText += " 安全性错误\n" + errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
msgText += " 每次最多上传 " + this.settings.uploadLimit + "个！\n";
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
msgText += errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
msgText += " 找不到指定文件，请重新操作！\n";
break;
case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
msgText += "参数错误！\n";
break;
default:
msgText += "文件:【" + file.name + "】\n错误码:" + errorCode + "\n"
+ errorMsg + "\n" + errorString;
}
art.dialog.alert(msgText);
return parameters;
}
//选择文件调用的方法
var uploadify_onSelect = function () {
}
//上传成功后调用的方法
var uploadify_onUploadSuccess = function (file, data, response) {
var innerHtml = "";
if (response) {
var json = (new Function("", "return " + data))();
innerHtml = "<li style=\"list-style: disc\">"
+ "<a style='color:#C51616' href='/HanNeng/DownFile?filePath=" + json.filePath + "&fileName=" + file.name + "&fileId=" + json.aID + "&backUrl=" + json.backUrl + "&url=" + json.url;
if (json.urlID != "") {
innerHtml += "?id=" + json.urlID;
}
innerHtml += "'>" + file.name + "</a>" + "<a style='margin-left: 10px;' href='javascript:void()' name='deleteImg' curid='" + json.aID + "' onclick=\"DeleteFile(this)\">"
+ "<img src='/Content/images/delete.png' /></a></li>";
//当上传的文档为课题的相关文档时，上传成功后作特殊处理
if (json.attType.indexOf("KT") >= ) {
$.ajax({
type: 'POST',
url: '/Subject/SubjectUploadDoc',
dataType: 'json',
data: { guid: json.guid, atttype: json.attType },
success: function (data) {
if (data.isok) {
}
}
});
}
} else {
innerHtml = "<div>该附件上传失败，请重新上传</div>";
}
$("#filename").html($("#filename").html() + innerHtml);
}
//检测FLASH失败调用
var uploadify_onFallback = function () {
art.dialog.alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
}
//加载完毕后，禁用uploadify时触发(通过disable方法)
var uploadify_onSWFReady = function () {
$('#file_upload').uploadify('disable', true);
$(".uploadify-button-text").css("color", "#999");
}
upload.js
3.MVC里控制器Controller的上传代码，并插入数据表中（'uploader'这个引用到），在return Json（）返回自己想要的参数，之后在上传成功后，在uploadify_onUploadSuccess方法里获取传过来的参数：
#region uploadify上传文件方法
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Upload(HttpPostedFileBase fileData)
{
HanNeng.Common.UpLoadHelper upload = new HanNeng.Common.UpLoadHelper();
string guid = HttpContext.Request.Form["guid"];
string attType = HttpContext.Request.Form["attType"];
string strUrl = HttpContext.Request.Form["url"];
string strUrlID = HttpContext.Request.Form["urlID"];
string backUrl = HttpContext.Request.Form["backUrl"];
int i = ;
int aid = ;
bool istrue = false;
if (fileData != null)
{
try
{
//文件上传后的保存路径
string filePath = upload.FilePath;//文件保存的目录
if (!Directory.Exists(filePath))
Directory.CreateDirectory(filePath); //如果不存在UploadFile文件夹，则创建UploadFile文件夹 upload.FileName = System.IO.Path.GetFileName(fileData.FileName); //得到文件名字
upload.FileWithoutName = System.IO.Path.GetFileNameWithoutExtension(fileData.FileName); //不含有扩展名
upload.FileSize = fileData.ContentLength; //得到文件大小
upload.FileExt = upload.GetExt(fileData.FileName);//得到文件扩展名
upload.Category = fileData.ContentType; //得到文件输出类型
upload.FileNewName = upload.GetFileName(upload.FileExt); //存入文件
fileData.SaveAs(filePath + upload.FileNewName);//保存文件到文件夹中
string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
string fileExtension = Path.GetExtension(fileName); // 文件扩展名 fileData.SaveAs(filePath + upload.FileNewName);
string path = "/UploadFile/" + System.IO.Path.GetFileName(upload.FileNewName); Model.Attachment att = new Model.Attachment();
att.AttachmentID = System.Guid.NewGuid().ToString("D");
att.FileName = upload.FileName;
att.FileLogicName = upload.FileNewName;
att.AttachmentType = attType;
att.FID = guid;
att.FilePath = path;
att.FileSize = upload.FileSize;
att.FileExtension = upload.FileExt;
att.CreateUserID = Identity.UserID;
att.CreateTime = DateTime.Now;
att.Category = upload.Category;
att.States = ;
att.Summary = (i + ).ToString(); //排序
istrue = new BLL.Attachment().Add(att) > ;
if (istrue)
{
Model.Attachment matt = new BLL.Attachment().GetModel("AttachmentID", att.AttachmentID);
if (matt != null)
aid = matt.AttachmentAutoID;
} return Json(new
{
Success = true,
fileName = att.FileName,
SaveName = att.FileLogicName,
attType = att.AttachmentType,
filePath = att.FilePath,
guid = att.FID,
aID = aid,
url = strUrl,
urlID = strUrlID,
backUrl = backUrl
}, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
else
return Json(new { Success = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);
}
#endregion
Upload方法
4.删除已上传文件的方法：
#region 无刷新删除上传的附件
public JsonResult DeleteFile(int aID)
{
bool isOk = false;
if (aID > )
{
Model.Attachment att = new BLL.Attachment().GetModel(aID);
if (att != null)
{
isOk = new BLL.Attachment().Delete(aID);
//将文件夹里的文件也一起删除
if (System.IO.Directory.Exists(Request.MapPath("~/UploadFile/")))
{
if (System.IO.File.Exists(Request.MapPath("~/UploadFile/" + att.FileLogicName)))
{
System.IO.File.Delete(Request.MapPath("~/UploadFile/" + att.FileLogicName));
}
}
}
}
return Json(new { success = isOk });
}
#endregion
DeleteFile方法
5.下载文件的方法
#region 下载文件-DownFile
/// <summary>
/// 下载文件
/// </summary>
/// <param name="filePath">文件路径</param>
/// <param name="fileName">文件名</param>
/// <param name="fileId">下载文件自增id</param>
/// <param name="url">下载失败返回界面url</param>
/// <returns></returns>
public ActionResult DownFile(string filePath, string fileName, string fileId, string url, string backUrl, string r = null)
{ string strurl = "";
if (url != null)
strurl = url;
if (r != null)
strurl = url + "&r=" + r;
if (!string.IsNullOrEmpty(backUrl))
{
strurl = strurl.Contains("?") ? strurl + "&backUrl=" + Url.Encode(backUrl) : strurl + "?backUrl=" + Url.Encode(backUrl);
}
if (string.IsNullOrEmpty(filePath) || string.IsNullOrEmpty(fileName) || string.IsNullOrEmpty(fileId))
{
return ShowRedirectMessage("下载失败", url != null ? strurl : "/Student/TableList");
}
//绝对路径
filePath = Server.MapPath(filePath);
if (!System.IO.File.Exists(filePath))
{
new BLL.Attachment().Delete(Convert.ToInt32(fileId));
return ShowRedirectMessage("下载的文件不存在", url != null ? strurl : "/Student/TableList");
}
FileStream fs = new FileStream(filePath, FileMode.Open);
byte[] bytes = new byte[(int)fs.Length];
fs.Read(bytes, , bytes.Length);//读取文件
fs.Close();
Response.Charset = "UTF-8";
Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
Response.ContentType = "application/octet-stream";//以二进制流输出给浏览器
//attachment:作为附件下载 inline:直接打开
Response.AddHeader("Content-Disposition", "attachment; filename=" + Server.UrlEncode(fileName));
Response.BinaryWrite(bytes);
Response.End();
return new EmptyResult();
}
#endregion #region 获取附件列表 GetProFile
/// <summary>
/// 获取附件列表
/// </summary>
/// <param name="guid"></param>
/// <param name="attType"></param>
/// <param name="a"></param>
/// <returns></returns>
public static List<MvcHtmlString> GetProFile(string guid, string attType, string a = null, string url = null, string backUrl = null)
{
List<Model.Attachment> M_Att = new BLL.Attachment().GetModelList(guid, attType);
List<MvcHtmlString> list = new List<MvcHtmlString>();
string str = "";
foreach (var item in M_Att)
{
str = "<a style='color:#C51616' href='/HanNeng/DownFile?filePath=" + item.FilePath + "&fileName=" + item.FileName + "&fileId=" + item.AttachmentAutoID + "&url=" + url + "&backUrl=" + backUrl + "'>" + item.FileName + "</a>";
if (a != null)
{
str += "<a style='margin-left: 10px;' href='javascript:void()' name='deleteImg' curid='" + item.AttachmentAutoID + "' onclick=\"DeleteFile(this)\"><img src='/Content/images/delete.png' /></a>";
}
list.Add(new MvcHtmlString(str));
}
return list;
}
#endregion
下载文件
6.在页面上的调用，设置一个全局变量var disable = false;是因为有些页面要根据权限禁用掉上传的功能。当全部加载完毕调用的是uploadify_onSWFReady方法后，如果disable为true时就禁用，为false时就可上传：
var disable = false; //全局变量
//文件上传
function uploadfile() {
var config = {
id: "file_upload",
formKey: "formData",
formData: { 'guid': $("#GUID").val(), 'attType': 'XM-PS-101', 'url': '/ProjectInfo/ProjectInfoAdd', 'urlID': $("#ID").val(), 'backUrl': $("#backUrl").val() },
fileTypeDesc: '文件',
fileTypeExts: '*.jpg;*.png;*.doc;*.docx;*.xls;*.xlsx;*.pdf',
sfdisable: disable
};
upload(config);
}
页面调用上传的方法
<input type="button" name="file_upload" id="upload" style="width: 84px; height: 29px;" class="uploadify-button uploadify uploadify-button-text" value="选择文件" /> <input type="file" name="file_upload" id="file_upload" style="display:none"/>
<ul id="filename" class="ulfile" style="padding-left: 20px"></ul>
页面的html
7.最终效果图：
作者：静水思寒
出处：http://www.cnblogs.com/jingshuisihan/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。