檔案上傳簡單實現是非常容易的,但是想要更高的要求,比如通過ajax上傳檔案、一次上傳多個檔案、檔案比較大等等,這裡面的坑就不是很容易填(對於新手來說)。因此在這裡我準備通過ajax實現多檔案上傳。在開始貼代碼之前,要注意幾點:
1.<input type="file" />是必須要加name的,不知道為什麼不加name屬性,後台擷取不到檔案資料(有辦法的大神可以在評論區提醒我),然後是multiple屬性,當multiple="multiple"時,file控制項是可以多選需要上傳的檔案的(<input type="file" multiple="multiple" name="myFile" />)。
2.form要設enctype為multiple/form-data
,multipart/form-data表示:不對字元編碼,在使用包含檔案上傳控制項的表單時,必須使用該值。關於enctype的詳細講解可以查看
3.重點來了,ajax的參數設定裡面有大坑(很多人都沒注意ajax的眾多參數),contentType和processData需要設為false,contentType明明被要求為string類型,但是這裡要設為false(我也不知道為什麼),網上關於contentType的說明大多是"contentType:要求為String類型的參數,當發送資訊至伺服器時,內容編碼類別型預設為"application/x-www-form-urlencoded"。該預設值適合大多數應用場合",還有個data要設為new FormData($(' ')[0]),想瞭解其他參數的可看這個http://www.cnblogs.com/babietongtianta/p/4543170.html。
下面就是簡單的前台代碼:
<form id="uploadForm" enctype="multipart/form-data" action="/Login/uploadFile" method="post">
<input type="file" multiple="multiple" id="PersonFile" name="MyFile" />
<button type="button" id="submitFile" onclick="uploadFile()">提交</button></form>
//上傳檔案
function uploadFile() {
debugger
$.ajax({
url: '/Login/uploadFile',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false, // 關鍵點
contentType: false, // 關鍵點
success: function (result) {
if (result.Check) {
alert("成功");
}
else {
alert("失敗");
}
var file = $("#PersonFile")
file.after(file.clone().val(""));
file.remove();
}
});
}
現在輪到後台了,我這邊後台是通過System.Web.HttpContext.Current.Request.Files擷取檔案資料集的,之後的代碼我將以圖片為例。
[HttpPost]
public ActionResult uploadFile()
{
Result<string> check = new Result<string>();
try
{
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
int number = 0;
for (int i = 0; i < files.Count; i++)
{
System.Text.StringBuilder fileName = new System.Text.StringBuilder();
fileName.Append(@"D:\");
fileName.Append(DateTime.Now.ToString("yyMMdd"));
fileName.Append(@"\");
if (!System.IO.Directory.Exists(fileName.ToString()))
{
System.IO.Directory.CreateDirectory(fileName.ToString());
}
fileName.Append(System.IO.Path.GetFileNameWithoutExtension(files[i].FileName));
fileName.Append(DateTime.Now.ToString("yyMMddHHmmss"));
fileName.Append(System.IO.Path.GetExtension(files[i].FileName));
System.IO.Stream sm = files[i].InputStream;
if (System.IO.File.Exists(@"D:\浮水印log.jpg"))
{
ImageHelper.ZoomAuto(sm, fileName.ToString(), 400, 300, "", @"D:\浮水印log.jpg");
}
else
{
ImageHelper.ZoomAuto(sm, fileName.ToString(), 400, 300, "浮水印LOG", "");
}
bool ok = System.IO.File.Exists(fileName.ToString());
if (ok)
{
number++;
}
}
if (number.Equals(files.Count))
{
check.Message = "上傳成功!";
check.Check = true;
}
else
{
check.Message = "失敗!";
check.Check = false;
}
return Json(check);
}
catch(Exception ex)
{
check.Message = ex.ToString();
check.Check = false;
return Json(check);
}
}
/// <summary>
/// 傳回值
/// </summary>
public class Result<T>
{
public string Message { get; set; }
public bool Check { get; set; }
public IList<T> ResultList { get; set; }
}
其中用到了ImageHelper.ZoomAuto(),這個是吳劍大哥寫的圖片處理類,地址http://www.cnblogs.com/wu-jian/archive/2011/02/21/1959382.html。最後還有一個坑,就是asp.net對一次上傳資料的大小是有限制的,要釋放保留才能10個20個檔案同時上傳。如何釋放保留?在web.config裡面配置一下就OK了。代碼如下:
<system.web>
<authentication mode="None" />
<compilation debug="true" targetFramework="4.5" />
<!--<httpRuntime targetFramework="4.5" />-->
<httpRuntime executionTimeout="500" maxRequestLength="409600" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />
</system.web>
把<httpRuntime >放<system.web>節點下。