ASP.NET MVC下使用文件上傳

這裏我經過使用uploadify組件來實現異步無刷新多文件上傳功能。

一、首先下載組件包uploadify，我這裏使用的版本是3.1

二、下載後解壓，將組件包拷貝到MVC項目中

 

三、  根目錄下添加新文件夾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);
            }
        }
    }
}

四、  添加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>

五、  啓動程序查看效果

 

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中的大小設置也就失效了。

能夠按照以下方法進行設置：

一、打開IIS管理器，找到Default Web Site。先進行中止。

二、在IIS中雙擊「請求篩選」打開。

三、點擊右邊的「編輯功能設置」，打開「編輯請求篩選設置」對話框。

     其中的容許的最大容量長度，默認是」30000000「，30M，將其修改成你所須要的大小便可。

四、啓動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); }