ASP.NETMVC下使用文件上傳

2019-11-14 16:01:21

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

文章轉(zhuǎn)載自：http://m.survivalescaperooms.com/jiekzou/

這里我通過使用uploadify組件來實(shí)現(xiàn)異步無刷新多文件上傳功能。

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

2、下載后解壓，將組件包拷貝到MVC項(xiàng)目中

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); // 文件擴(kuò)展名                    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': '上傳圖片',                //顯示的高度和寬度，默認(rèn) height 30；width 120                //'height': 15,                //'width': 80,                //上傳文件的類型  默認(rèn)為所有文件    'All Files'  ;  '*.*'                //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本                'fileTypeDesc': 'Image Files',                //允許上傳的文件后綴                'fileTypeExts': '*.gif; *.jpg; *.png',                //發(fā)送給后臺的其他參數(shù)通過formData指定                //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },                //上傳文件頁面中，你想要用來作為文件隊列的元素的id, 默認(rèn)為false  自動生成,  不帶#                //'queueID': 'fileQueue',                //選擇文件后自動上傳                'auto': false,                //設(shè)置為true將允許多文件上傳                'multi': true            });        });      </script>  <div>       @*用來作為文件隊列區(qū)域*@        <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常用屬性設(shè)置

auto：是否選擇文件后自動上傳，默認(rèn)為true。

buttonText：設(shè)置上傳按鈕顯示文字。

buttonImage：設(shè)置上傳按鈕背景圖片。

multi：是否允許一次選擇多個文件一起上傳，默認(rèn)為true。

fileTypeDesc：設(shè)置允許上傳圖片格式描述；

fileTypeExts：設(shè)置允許上傳圖片格式。

removeCompleted：設(shè)置已完成上傳的文件是否從隊列中移除，默認(rèn)為true。

queueSizeLimit：設(shè)置上傳隊列中同時允許的上傳文件數(shù)量，默認(rèn)為999。

uploadLimit：設(shè)置允許上傳的文件數(shù)量，默認(rèn)為999。

Uploadify常用事件設(shè)置

onUploadComplete:單個文件上傳完成時觸發(fā)事件。

$(function() {    $("#file_upload").uploadify({
         'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")', //指定swf文件
         'uploader': '/Uploadify/Upload',//后臺處理的頁面        'onUploadComplete' : function(file) {            alert('The file ' + file.name + ' finished );        }    });});

onQueueComplete：隊列中全部文件上傳完成時觸發(fā)事件。

$(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：單個文件上傳成功后觸發(fā)事件。

$(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 + ' 已經(jīng)上傳成功，并返回 ' + response + ' 保存文件名稱為 ' + data.SaveName);            }        });
});

設(shè)置上傳圖片大小

asp.net MVC默認(rèn)情況下，允許上傳的文件大小最大為4MB。因此在默認(rèn)情況下，Uploadify也只能最大上傳4MB大小的文件，超過范圍則會IO報錯提示無法上傳。

修改Web.config設(shè)置允許上傳的最大文件大小：

<system.web>　　<!--設(shè)置最大允許上傳文件大小1G-->　　<httpRuntime maxRequestLength= "1024000" executionTimeout= "60" /></system.web>

添加system.webServer節(jié)點(diǎn)

<system.webServer> 
<security> 
<requestFiltering>
<!--修改服務(wù)器允許最大長度-->
<requestLimits maxAllowedContentLength="1073741824"/>
</requestFiltering>
</security>
</system.webServer>

注意：由于IIS7下的默認(rèn)設(shè)置限制了上傳大小。這個時候Web.Config中的大小設(shè)置也就失效了。

可以按照如下方法進(jìn)行設(shè)置：

1、打開IIS管理器，找到Default Web Site。先進(jìn)行停止。