有时项目中需要一个文件批量上传功能时，个人认为uploadify是快速简便的解决方案。
先上效果图：
一. 下载uploadify从官网下载uploadify的Flash版本(Flash版本免费，另一版本HTML5版本需要付费)
下载地址： http://www.uploadify.com/download/
下载后直接把文件解压，然后放在项目中
二. 在项目中使用在页面中引入：
<!--引入Jquery--><scriptsrc="js/jquery-1.11.3.min.js"></script><!--引入uploadify--><scripttype="text/javascript"src="uploadify/jquery.uploadify.js"></script><linktype="text/CSS"href="uploadify/uploadify.css"rel="stylesheet"/>
完整页面代码
<%@ Page Language="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%><!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>文件批量上传Demo</title><!--引入Jquery--><scriptsrc="js/jquery-1.11.3.min.js"></script><!--引入uploadify--><scripttype="text/Javascript"src="uploadify/jquery.uploadify.js"></script><linktype="text/css"href="uploadify/uploadify.css"rel="stylesheet"/><scripttype="text/javascript">$(function() {varguid='<%=Request["guid"] %>';vartype='<%=Request["type"] %>';if(guid==null||guid=="") {
guid=newGuid();
}if(type!=null) {
type=type+'/';
}
$('#file_upload').uploadify({'swf':'uploadify/uploadify.swf',//FLash文件路径'buttonText':'浏 览',//按钮文本'uploader':'uploadhandler.ashx?guid='+guid,//处理ASHX页面'formData': {'folder':'picture','isCover':1},//传参数'queueID':'fileQueue',//队列的ID'queueSizeLimit':10,//队列最多可上传文件数量，默认为999'auto':false,//选择文件后是否自动上传，默认为true'multi':true,//是否为多选，默认为true'removeCompleted':true,//是否完成后移除序列，默认为true'fileSizeLimit':'0',//单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值'fileTypeDesc':'All Files',//文件描述'fileTypeExts':'*.*',//上传的文件后缀过滤器'onQueueComplete':function(queueData) {//所有队列完成后事件alert("上传完毕！");
},'onError':function(event, queueId, fileObj, errorObj) {
alert(errorObj.type+"："+errorObj.info);
},'onUploadStart':function(file) {
},'onUploadSuccess':function(file, data, response) {//一个文件上传成功后的响应事件处理//var data = $.parseJSON(data);//如果data是json格式//var errMsg = "";}
});
});functionnewGuid() {varguid="";for(vari=1; i<=32; i++) {varn=Math.floor(Math.random()*16.0).toString(16);
guid+=n;if((i==8)||(i==12)||(i==16)||(i==20))
guid+="-";
}returnguid;
}//执行上传functiondoUpload() {
$('#file_upload').uploadify('upload','*');
}</script></head><body><formid="form1"runat="server"enctype="multipart/form-data"><divid="fileQueue"class="fileQueue"></div><div><inputtype="file"name="file_upload"id="file_upload"/><p><inputtype="button"class="shortbutton"id="btnUpload"onclick="doUpload()"value="上传"/> <inputtype="button"class="shortbutton"id="btnCancelUpload"onclick="$('#file_upload').uploadify('cancel')"value="取消"/></p><divid="div_show_files"></div></div></form></body></html>
View Code
UploadHandler.ashx代码
usingSystem;usingSystem.Web;usingSystem.IO;publicclassUploadHandler : IHttpHandler {publicvoidPRocessRequest (HttpContext context) {
context.Response.ContentType="text/plain";
context.Request.ContentEncoding= System.Text.Encoding.GetEncoding("UTF-8");
context.Response.ContentEncoding= System.Text.Encoding.GetEncoding("UTF-8");
context.Response.Charset="UTF-8";if(context.Request.Files.Count >0)
{#region获取上传路径stringuploadFolder =GetUploadFolder();#endregionif(System.IO.Directory.Exists(uploadFolder))
{//如果上传路径存在HttpPostedFile file = context.Request.Files["Filedata"];stringfilePath =Path.Combine(uploadFolder, file.FileName);
file.SaveAs(filePath);
context.Response.Write("0");
}else{
context.Response.Write("2");
}
}
}publicboolIsReusable {get{returnfalse;
}
}///<summary>///返回不带后缀的文件名///</summary>///<param name="fileName"></param>///<returns></returns>publicstaticstringGetFirstFileName(stringfileName)
{returnPath.GetFileNameWithoutExtension(fileName);
}///<summary>///获取上传目录///</summary>///<returns></returns>publicstaticstringGetUploadFolder()
{stringrootPath = HttpContext.Current.Server.MapPath("~");returnPath.Combine(rootPath,"test");
}
}
View Code
Demo下载
三. 延伸和总结文件上传.NET默认有大小限制，像IIS限制的30M默认请求大小。如果不想修改IIS，又想突破这个大小限制，比如上传1GB大小的文件。
这时修改Web.config即可实现
<?xml version="1.0"encoding="utf-8"?>
<!--有关如何配置asp.net应用程序的详细信息，请访问
http://go.microsoft.com/fwlink/?LinkId=169433-->
<configuration>
<system.web>
<compilation debug="true"targetFramework="4.0"/>
<httpRuntime maxRequestLength="1073741824"/>
</system.web>
<!--用于设置文件上传的最大允许大小(单位：bytes)-->
<system.webServer>
<security>
<requestFiltering>
<!--修改服务器允许最大长度(1GB)-->
<requestLimits maxAllowedContentLength="1073741824"/>
</requestFiltering>
</security>
</system.webServer>
</configuration>
希望本文对你有帮助。