這里我通過使用uploadify組件來實現異步無刷新多文件上傳功能。
1、首先下載組件包uploadify，我這里使用的版本是3.1
2、下載后解壓，將組件包拷貝到MVC項目中
3、 根目錄下添加新文件夾Uploads，然后新建控制器UploadifyController.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Shop.Controllers
{
public class UploadifyController : Controller
{
//
// GET: /Uploadify/
public ActionResult Index()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Upload(HttpPostedFileBase fileData)
{
if (fileData != null)
{
try
{
// 文件上傳后的保存路徑
string filePath = Server.MapPath("~/Uploads/");
if (!Directory.Exists(filePath))
{
Directory.CreateDirectory(filePath);
}
string fileName = Path.GetFileName(fileData.FileName);// 原始文件名稱
string fileExtension = Path.GetExtension(fileName); // 文件擴展名
string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名稱
fileData.SaveAs(filePath + saveName);
return Json(new { Success = true, FileName = fileName, SaveName = saveName });
}
catch (Exception ex)
{
return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
else
{
return Json(new { Success = false, Message = "請選擇要上傳的文件！" }, JsonRequestBehavior.AllowGet);
}
}
}
}
4、 添加Index視圖
@{
ViewBag.Title = "Index";
Layout = null;
}
<link href="~/Content/uploadify/uploadify.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Content/uploadify/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#file_upload").uploadify({
//指定swf文件
'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")',
//后台處理的頁面
'uploader': '/Uploadify/Upload',
//按鈕顯示的文字
'buttonText': '上傳圖片',
//顯示的高度和寬度，默認 height 30；width 120
//'height': 15,
//'width': 80,
//上傳文件的類型 默認為所有文件 'All Files' ; '*.*'
//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeDesc': 'Image Files',
//允許上傳的文件后綴
'fileTypeExts': '*.gif; *.jpg; *.png',
//發送給后台的其他參數通過formData指定
//'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
//上傳文件頁面中，你想要用來作為文件隊列的元素的id, 默認為false 自動生成, 不帶#
//'queueID': 'fileQueue',
//選擇文件后自動上傳
'auto': false,
//設置為true將允許多文件上傳
'multi': true,
//上傳完成后執行
'onUploadSuccess': function (file, data, response) {
var a = jQuery.parseJSON(data);
if (a.Success) {
$.dialog.alert(a.Message);
}
else {
$.dialog.alert("導入提單成本費用異常：" + a.Message);
}
}
});
});
</script>
<div>
@*用來作為文件隊列區域*@
<div id="fileQueue">
</div>
<input type="file" id="file_upload" name="file_upload" />
<p>
<a href="javascript:$('#file_upload').uploadify('upload');">上傳第一個</a>
<a href="javascript:$('#file_upload').uploadify('upload','*');">上傳隊列</a>
<a href="javascript:$('#file_upload').uploadify('cancel');">取消第一個</a>
<a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消隊列</a>
</p>
</div>
5、 啟動程序查看效果
Uploadify常用屬性設置
auto：是否選擇文件后自動上傳，默認為true。
buttonText：設置上傳按鈕顯示文字。
buttonImage：設置上傳按鈕背景圖片。
multi：是否允許一次選擇多個文件一起上傳，默認為true。
fileTypeDesc：設置允許上傳圖片格式描述；
fileTypeExts：設置允許上傳圖片格式。
removeCompleted：設置已完成上傳的文件是否從隊列中移除，默認為true。
queueSizeLimit：設置上傳隊列中同時允許的上傳文件數量，默認為999。
uploadLimit：設置允許上傳的文件數量，默認為999。
Uploadify常用事件設置
onUploadComplete:單個文件上傳完成時觸發事件。
$(function() {
$("#file_upload").uploadify({
'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")', //指定swf文件
'uploader': '/Uploadify/Upload',//后台處理的頁面
'onUploadComplete' : function(file) {
alert('The file ' + file.name + ' finished processing.');
}
});
});
onQueueComplete：隊列中全部文件上傳完成時觸發事件。
$(function() {
$("#file_upload").uploadify({
'swf' : '@Url.Content("~/Content/uploadify/uploadify.swf")',
'uploader' : 'uploader': '/Uploadify/Upload',
'onQueueComplete' : function(queueData) {
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
}
});
});
onUploadSuccess：單個文件上傳成功后觸發事件。
$(function () {
$('#file_upload').uploadify({
'buttonImage': '@Url.Content("~/Content/uploadify/browse-btn.png")',
'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")', //指定swf文件
'uploader': '/Uploadify/Upload',//后台處理的頁面
'onUploadSuccess': function (file, data, response) {
eval("data=" + data);
alert('文件 ' + file.name + ' 已經上傳成功，並返回 ' + response + ' 保存文件名稱為 ' + data.SaveName);
}
});
});
設置上傳圖片大小
ASP.NET MVC默認情況下，允許上傳的文件大小最大為4MB。因此在默認情況下，Uploadify也只能最大上傳4MB大小的文件，超過范圍則會IO報錯提示無法上傳。
修改Web.config設置允許上傳的最大文件大小：
<system.web> <!--設置最大允許上傳文件大小1G--> <httpRuntime maxRequestLength= "1024000" executionTimeout= "60" /> </system.web>
添加system.webServer節點
<system.webServer>
<security>
<requestFiltering>
<!--修改服務器允許最大長度-->
<requestLimits maxAllowedContentLength="1073741824"/>
</requestFiltering>
</security>
</system.webServer>
注意：由於IIS7下的默認設置限制了上傳大小。這個時候Web.Config中的大小設置也就失效了。
可以按照如下方法進行設置：
1、打開IIS管理器，找到Default Web Site。先進行停止。
2、在IIS中雙擊“請求篩選”打開。
3、點擊右邊的“編輯功能設置”，打開“編輯請求篩選設置”對話框。
其中的允許的最大容量長度，默認是”30000000“，30M，將其修改為你所需要的大小即可。
4、啟動IIS.
問題
即便按照上面把所有操作都准備好了，在用到uploadify的界面加載時還是會報錯，一個詭異的GET請求，返回一個HTTP 404 Not Found的錯誤
解決方案：修改jquery.uploadify-3.1.js源碼
將下面代碼：
this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);修改成如下：
if (this.settings.button_image_url != "") { this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url); }