form方式上傳一組圖片

上傳文件必須要設置form元素里面的 enctype="multipart/form-data" 屬性和post方式，如果你想要多選上傳文件的話，需要把文件type='file'元素設置她的屬性multiple='multiple'，內容：

<form class="form-horizontal" action="/Home/FileUp" method="post" enctype="multipart/form-data">
 
               <input type="file" name="MyPhoto" class="form-control" multiple />
               <br />
               <button class="btn btn-default">form上傳</button>
               <br />
               <span style="color:red">@ViewData["MsgBox"]</span>
           </form>

由于采用form提交，這個測試用例只接用了button元素默認的type=submit來提交表單，對應的后臺Action中代碼如下：

/// <summary>
        /// form提交上傳
        /// </summary>
        /// <param name="user"></param>
        /// <returns></returns>
        [HttpPost]
        public async Task<IActionResult> FileUp(MoUser user)
        {
            if (user.MyPhoto == null || user.MyPhoto.Count <= 0) { MsgBox("請上傳圖片。"); return View(); }
            //var file = Request.Form.Files;
            foreach (var file in user.MyPhoto)
            {
                var fileName = file.FileName;
                var contentType = file.ContentType;
                var len = file.Length;
 
                var fileType = new string[] { "image/jpeg", "image/png" };
                if (!fileType.Any(b => b.Contains(contentType))) { MsgBox($"只能上傳{string.Join(",", fileType)}格式的圖片。"); return View(); }
 
                if (len > 1024 * 1024 * 4) { MsgBox("上傳圖片大小只能在4M以下。"); return View(); }
 
                var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
                using (var stream = System.IO.File.Create(path))
                {
                    await file.CopyToAsync(stream);
                }
            }
            MsgBox($"上傳成功");
 
            return View();
        }

從前端到后端的Action不得不說這種form表單提交的方式挺簡單的，需要注意的是Action這里用的實體模型方式來對應上傳的文件信息，這里自定義了MoUser類，通過屬性 public List<IFormFile> MyPhoto { get; set; } 來匹配html表單中文件type='file'的name屬性名稱name="MyPhoto"：

public class MoUser
    {
        public int UserId { get; set; } = 1;
        public string UserName { get; set; } = "神牛步行3";
 
        public List<IFormFile> MyPhoto { get; set; }
    }

這樣就能通過實體模型的方式把上傳的文件信息存儲在自定義MoUser類中的MyPhoto屬性中了；

ajax上傳一組圖片

這里需要在上面例子中的html處修改一些東西，不再使用form提交，指定了普通button按鈕來觸發ajax的提交，完整html代碼如：

<form class="form-horizontal" id="form01" method="post" enctype="multipart/form-data">
 
                <input type="file" name="MyPhoto01" class="form-control" multiple />
                <br />
                <button type="button" id="btnAjax" class="btn btn-default">ajax上傳</button>
                <br />
                <span style="color:red" id="span01"></span>
            </form>

有了布局，再來看看具體的js實現代碼，這里我采用jquery的ajax提交的方法來操作，也用到了html5新增的FormData來存儲表單的數據：

$("#btnAjax").on("click", function () {
            var msg = $("#span01");
            var form = document.getElementById("form01");
            //console.log(form);
            var data = new FormData(form);
 
            $.ajax({
                type: "POST",
                url: "/home/AjaxFileUp",
                data: data,
 
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data) {
                        msg.html(data.msg);
                    }
                },
                error: function () {
                    msg.html("上傳文件異常,請稍后重試！");
                }
            });
        });

至于后臺Action的方法和示例一的相差不大，關鍵點在于這里我直接使用 Request.Form.Files 方式來獲取上傳的所有文件，不再使用實體模型的方式了，這樣測試用例更多樣化吧：

/// <summary>
        /// ajax無上傳進度效果上傳
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public async Task<JsonResult> AjaxFileUp()
        {
            var data = new MoData { Msg = "上傳失敗" };
            try
            {
                var files = Request.Form.Files.Where(b => b.Name == "MyPhoto01");
                //非空限制
                if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的文件。"; return Json(data); }
 
                //格式限制
                var allowType = new string[] { "image/jpeg", "image/png" };
                if (files.Any(b => !allowType.Contains(b.ContentType)))
                {
                    data.Msg = $"只能上傳{string.Join(",", allowType)}格式的文件。";
                    return Json(data);
                }
 
                //大小限制
                if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)
                {
                    data.Msg = "上傳文件的總大小只能在4M以下。"; return Json(data);
                }
 
                //寫入服務器磁盤
                foreach (var file in files)
                {
 
                    var fileName = file.FileName;
                    var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
                    using (var stream = System.IO.File.Create(path))
                    {
                        await file.CopyToAsync(stream);
                    }
                }
                data.Msg = "上傳成功";
                data.Status = 2;
 
            }
            catch (Exception ex)
            {
                data.Msg = ex.Message;
            }
            return Json(data);
        }

如果你有耐心讀到這里，那么后面的內容個人感覺對你開發會有好的幫助，不負你期待；

ajax提交+上傳進度+一組圖片上傳

同樣我們先來看對應的html代碼，其實和示例2幾乎一樣，只是把名稱變動了下：

<form class="form-horizontal" id="form02" method="post" enctype="multipart/form-data">
 
                <input type="file" name="MyPhoto02" class="form-control" multiple />
                <br />
                <button type="button" id="btnAjax02" class="btn btn-default">ajax上傳進度效果上傳</button>
                <br />
                <span style="color:red" id="span02"></span>
            </form>

要加一個進度效果，需要用到js的定時器，定時獲取上傳文件的上傳進度數據信息，因此這里通過js的setInterval方法來定時請求一個進度數據接口，注意用完之后需要清除這個定時器，不然一直再不斷請求您接口：

$("#btnAjax02").on("click", function () {
 
            var interBar;
            var msg = $("#span02");
            msg.html("上傳中，請稍后...");
            var form = document.getElementById("form02");
            //console.log(form);
            var data = new FormData(form);
 
            $.ajax({
                type: "POST",
                url: "/home/AjaxFileUp02",
                data: data,
 
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data) {
                        msg.html(data.msg);
                        //清除進度查詢
                        if (interBar) { clearInterval(interBar); }
                    }
                },
                error: function () {
                    msg.html("上傳文件異常,請稍后重試！");
                    if (interBar) { clearInterval(interBar); }
                }
            });
 
            //獲取進度
            interBar = setInterval(function () {
 
                $.post("/home/ProgresBar02", function (data) {
                  
                    if (data) {
                        var isClearVal = true;
                        var strArr = [];
                        $.each(data, function (i, item) {
                            strArr.push('文件：' + item.fileName + ",當前上傳：" + item.percentBar + '<br/>');
                            if (item.status != 2) { isClearVal = false; }
                        });
                        msg.html(strArr.join(''));
                        if (isClearVal) {
                            if (interBar) { clearInterval(interBar); }
                        }
                    }
                });
            }, 200);
        });

既然上面說到單獨的進度數據接口，那么我們除了上傳Action外，也需要進度的Action，而這進度Action得到的上傳文件數據信息必須和上傳的Action一直，因此就需要用到緩存等存儲數據的方式，這里我用的是MemoryCache的方式，對已netcore來說僅僅只需要在起始文件（如：Startup.cs）中添加組件服務：

public void ConfigureServices(IServiceCollection services)
        {
            // Add framework services.
            services.AddMvc();
 
            //添加cache支持
            services.AddDistributedMemoryCache();
        }

然后通過構造函數注入到對應的接口Controller中去：

readonly IMemoryCache _cache;
 
        public HomeController(IOptions<MoOptions> options, ILogger<HomeController> logger, IMemoryCache cache)
        {
            this._options = options.Value;
            _logger = logger;
            _cache = cache;
        }

到此我們就能利用cache來存儲我們上傳進度信息了，來看下處理上傳的Action：

100

101

private string cacheKey = "UserId_UpFile";
        private string cacheKey03 = "UserId_UpFile03";
        /// <summary>
        /// ajax上傳進度效果上傳
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public async Task<JsonResult> AjaxFileUp02()
        {
            var data = new MoData { Msg = "上傳失敗" };
            try
            {
                var files = Request.Form.Files.Where(b => b.Name == "MyPhoto02");
                //非空限制
                if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的文件。"; return Json(data); }
 
                //格式限制
                var allowType = new string[] { "image/jpeg", "image/png" };
                if (files.Any(b => !allowType.Contains(b.ContentType)))
                {
                    data.Msg = $"只能上傳{string.Join(",", allowType)}格式的文件。";
                    return Json(data);
                }
 
                //大小限制
                if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)
                {
                    data.Msg = "上傳文件的總大小只能在4M以下。"; return Json(data);
                }
 
                //初始化上傳多個文件的Bar，存儲到緩存中，方便獲取上傳進度
                var listBar = new List<MoBar>();
                files.ToList().ForEach(b =>
                {
                    listBar.Add(new MoBar
                    {
                        FileName = b.FileName,
                        Status = 1,
                        CurrBar = 0,
                        TotalBar = b.Length
                    });
                });
                _cache.Set<List<MoBar>>(cacheKey, listBar);
 
                //寫入服務器磁盤
                foreach (var file in files)
                {
                    //總大小
                    var totalSize = file.Length;
                    //初始化每次讀取大小
                    var readSize = 1024L;
                    var bt = new byte[totalSize > readSize ? readSize : totalSize];
                    //當前已經讀取的大小
                    var currentSize = 0L;
 
                    var fileName = file.FileName;
                    var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
                    using (var stream = System.IO.File.Create(path))
                    {
                        //await file.CopyToAsync(stream);
                        //進度條處理流程
                        using (var inputStream = file.OpenReadStream())
                        {
                            //讀取上傳文件流
                            while (await inputStream.ReadAsync(bt, 0, bt.Length) > 0)
                            {
 
                                //當前讀取的長度
                                currentSize += bt.Length;
 
                                //寫入上傳流到服務器文件中
                                await stream.WriteAsync(bt, 0, bt.Length);
 
                                //獲取每次讀取的大小
                                readSize = currentSize + readSize <= totalSize ?
                                        readSize :
                                        totalSize - currentSize;
                                //重新設置
                                bt = new byte[readSize];
 
                                //設置當前上傳的文件進度，并重新緩存到進度緩存中
                                var bars = _cache.Get<List<MoBar>>(cacheKey);
                                var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault();
                                currBar.CurrBar = currentSize;
                                currBar.Status = currentSize >= totalSize ? 2 : 1;
                                _cache.Set<List<MoBar>>(cacheKey, bars);
 
                                System.Threading.Thread.Sleep(1000 * 1);
                            }
                        }
                    }
                }
                data.Msg = "上傳完成";
                data.Status = 2;
            }
            catch (Exception ex)
            {
                data.Msg = ex.Message;
            }
            return Json(data);
        }

代碼一下子就變多了，其實按照邏輯來說增加了存儲進度的Cache，和逐一讀取上傳文件流的邏輯而已，具體大家可以仔細看下代碼，都有備注說明；再來就是咋們的進度信息Action接口：

[HttpPost]
        public JsonResult ProgresBar02()
        {
            var bars = new List<MoBar>();
            try
            {
                bars = _cache.Get<List<MoBar>>(cacheKey);
            }
            catch (Exception ex)
            {
            }
            return Json(bars);
        }

進度接口只需要獲取cache中的進度信息就行了，注：這里是測試用例，具體使用場景請各位自行增加其他邏輯代碼；下面就來看下效果截圖：

Task并行處理+ajax提交+上傳進度+一組圖片上傳

這一小節，將會使用Task來處理上傳的文件，通過上一小節截圖能夠看出，如果你上傳多個文件，那么都是按照次序一個一個讀取文件流來生成上傳文件到服務器，這里改良一下利用Task的特點，就能實現同時讀取不同文件流了，先來看下html代碼和js代碼:

<form class="form-horizontal" id="form03" method="post" enctype="multipart/form-data">
 
                <input type="file" name="MyPhoto03" class="form-control" multiple />
                <br />
                <button type="button" id="btnAjax03" class="btn btn-default">task任務處理ajax上傳進度效果上傳</button>
                <br />
                <span style="color:red" id="span03"></span>
            </form>

由于和示例3的js代碼無差別這里我直接貼出代碼：

$("#btnAjax03").on("click", function () {
 
            var interBar;
            var msg = $("#span03");
            msg.html("上傳中，請稍后...");
            var form = document.getElementById("form03");
            //console.log(form);
            var data = new FormData(form);
 
            $.ajax({
                type: "POST",
                url: "/home/AjaxFileUp03",
                data: data,
 
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data) {
                        msg.html(data.msg);
                        //清除進度查詢
                        if (interBar) { clearInterval(interBar); }
                    }
                },
                error: function () {
                    msg.html("上傳文件異常,請稍后重試！");
                    if (interBar) { clearInterval(interBar); }
                }
            });
 
            //獲取進度
            interBar = setInterval(function () {
 
                $.post("/home/ProgresBar03", function (data) {
            
                    if (data) {
                        var isClearVal = true;
                        var strArr = [];
                        $.each(data, function (i, item) {
                            strArr.push('文件：' + item.fileName + ",當前上傳：" + item.percentBar + '<br/>');
                            if (item.status != 2) { isClearVal = false; }
                        });
                        msg.html(strArr.join(''));
                        if (isClearVal) {
                            if (interBar) { clearInterval(interBar); }
                        }
                    }
                });
            }, 200);
        });

關鍵點在后臺，通過task數組來存儲每個上傳文件的處理任務 Task[] tasks = new Task[len]; ，然后使用 Task.WaitAll(tasks); 等待所有上傳任務的完成，這里特別注意了這里必須等待，不然會丟失上傳文件流(多次測試結果)：

100

101

102

103

104

105

106

107

108

109

110

111

/// <summary>
        /// ajax上傳進度效果上傳
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public JsonResult AjaxFileUp03()
        {
            var data = new MoData { Msg = "上傳失敗" };
            try
            {
                var files = Request.Form.Files.Where(b => b.Name == "MyPhoto03");
                //非空限制
                if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的文件。"; return Json(data); }
 
                //格式限制
                var allowType = new string[] { "image/jpeg", "image/png" };
                if (files.Any(b => !allowType.Contains(b.ContentType)))
                {
                    data.Msg = $"只能上傳{string.Join(",", allowType)}格式的文件。";
                    return Json(data);
                }
 
                //大小限制
                if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)
                {
                    data.Msg = "上傳文件的總大小只能在4M以下。"; return Json(data);
                }
 
                //初始化上傳多個文件的Bar，存儲到緩存中，方便獲取上傳進度
                var listBar = new List<MoBar>();
                files.ToList().ForEach(b =>
                {
                    listBar.Add(new MoBar
                    {
                        FileName = b.FileName,
                        Status = 1,
                        CurrBar = 0,
                        TotalBar = b.Length
                    });
                });
                _cache.Set<List<MoBar>>(cacheKey03, listBar);
 
                var len = files.Count();
                Task[] tasks = new Task[len];
                //寫入服務器磁盤
                for (int i = 0; i < len; i++)
                {
                    var file = files.Skip(i).Take(1).SingleOrDefault();
                    tasks[i] = Task.Factory.StartNew((p) =>
                    {
                        var item = p as IFormFile;
 
                        //總大小
                        var totalSize = item.Length;
                        //初始化每次讀取大小
                        var readSize = 1024L;
                        var bt = new byte[totalSize > readSize ? readSize : totalSize];
                        //當前已經讀取的大小
                        var currentSize = 0L;
 
                        var fileName = item.FileName;
                        var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
                        using (var stream = System.IO.File.Create(path))
                        {
                            //進度條處理流程
                            using (var inputStream = item.OpenReadStream())
                            {
                                //讀取上傳文件流
                                while (inputStream.Read(bt, 0, bt.Length) > 0)
                                {
 
                                    //當前讀取的長度
                                    currentSize += bt.Length;
 
                                    //寫入上傳流到服務器文件中
                                    stream.Write(bt, 0, bt.Length);
 
                                    //獲取每次讀取的大小
                                    readSize = currentSize + readSize <= totalSize ?
                                           readSize :
                                           totalSize - currentSize;
                                    //重新設置
                                    bt = new byte[readSize];
 
                                    //設置當前上傳的文件進度，并重新緩存到進度緩存中
                                    var bars = _cache.Get<List<MoBar>>(cacheKey03);
                                    var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault();
                                    currBar.CurrBar = currentSize;
                                    currBar.Status = currentSize >= totalSize ? 2 : 1;
                                    _cache.Set<List<MoBar>>(cacheKey03, bars);
 
                                    System.Threading.Thread.Sleep(1000 * 1);
                                }
                            }
                        }
 
                    }, file);
                }
 
                //任務等待 ，這里必須等待，不然會丟失上傳文件流
                Task.WaitAll(tasks);
 
                data.Msg = "上傳完成";
                data.Status = 2;
            }
            catch (Exception ex)
            {
                data.Msg = ex.Message;
            }
            return Json(data);
        }

至于獲取上傳進度的Action也僅僅只是讀取緩存數據而已：

[HttpPost]
        public JsonResult ProgresBar03()
        {
            var bars = new List<MoBar>();
            try
            {
                bars = _cache.Get<List<MoBar>>(cacheKey03);
            }
            catch (Exception ex)
            {
            }
            return Json(bars);
        }

這里再給出上傳進度的實體類：

public class MoData
    {
        /// <summary>
        /// 0：失敗 1：上傳中 2:成功
        /// </summary>
        public int Status { get; set; }
 
        public string Msg { get; set; }
    }
 
    public class MoBar : MoData
    {
        /// <summary>
        /// 文件名字
        /// </summary>
        public string FileName { get; set; }
 
        /// <summary>
        /// 當前上傳大小
        /// </summary>
        public long CurrBar { get; set; }
 
        /// <summary>
        /// 總大小
        /// </summary>
        public long TotalBar { get; set; }
 
        /// <summary>
        /// 進度百分比
        /// </summary>
        public string PercentBar
        {
            get
            {
                return $"{(this.CurrBar * 100 / this.TotalBar)}%";
            }
        }
    }

到此task任務處理上傳文件的方式就完成了，咋們來看圖看效果吧：

能夠通過示例3和4的效果圖對比出，沒使用Task和使用的效果區別，這樣效果您值得擁有，耐心讀完本文內容的朋友，內容最后附上具體測試用例代碼：.NetCore上傳多文件的幾種示例

posted on 2017-12-05 09:38 zrSoldier 閱讀(567) 評論(0) 收藏舉報

刷新頁面返回頂部

公告

導航

form方式上傳一組圖片

ajax上傳一組圖片

ajax提交+上傳進度+一組圖片上傳

Task并行處理+ajax提交+上傳進度+一組圖片上傳