ASP.NET(二十二)---ASP.NET MVC下使用文件上傳

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

下載組件包uploadify

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);
            }
        });});

6.設置上傳圖片大小

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>