實現MVC檔案上傳支援批量上傳拖拽及預覽檔案內容校正功能的程式碼範例

最後更新：2017-04-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

網站中的上傳相信大家都不陌生，也算是一個小小的技術痛點，尤其時在asp.net中，上傳的一些大小限制以及上傳的進度的控制，以及使用者體驗等方面，今天在這裡分享一個在asp.net mvc模式下的檔案上傳，同樣適用於其它web類型bootstrap-fileinput .

它來自一個開源項目 github.com/kartik-v/bootstrap-fileinput/

文檔地址：plugins.krajee.com/file-input

用一個下午的時間將文檔通讀了一次，並且做了根據文檔指示做出了一個小型的demo，效果出奇的好，如下是：

可以對檔案預覽篩選，從用戶端就過濾一些不適用的檔案，而且介面效果還特別美觀

如下是使用方式：或者直接參照代碼寫就可以

使用方式：

1.nuget:Install-Package bootstrap-fileinput

2.語言本地化｛下載fileinput_locale_zh.js｝或者修改Fileinput中的本地化詞彙

下載地址：github.com/kartik-v/bootstrap-fileinput/tree/master/js/locales 【中文是zh.js】

文檔結構：

3.檔案大小限制：修改fileinput.js中的3195行 maxFilePreviewSize配置節點

maxFilePreviewSize: 25600, // 25 MB 預設是25M，根據需要手動調整

樣本：前台 --代碼中的注釋已經足夠解釋各配置項的作用，就不贅述了.

@{  Layout = null;}<!DOCTYPE html><html><head>  <meta name="viewport" content="width=device-width" />  <title>Index</title>  <script src="~/scripts/jquery-1.9.1.js"></script>  <script src="~/scripts/bootstrap.js"></script>  <link href="~/Content/bootstrap.css" rel="external nofollow" rel="stylesheet" />  <script src="~/scripts/fileinput.js"></script>  <script src="~/scripts/fileinput_locale_zh.js"></script>  <link href="~/Content/bootstrap-fileinput/css/fileinput.css" rel="external nofollow" rel="stylesheet" />  <script type="text/javascript">    $(function () {      var control = $("#txt_file");      var uploadrul = "/Home/UploadFile";      control.fileinput({        language: 'zh', //設定語言        uploadUrl: uploadrul, //上傳的地址        allowedFileExtensions: ['xml','docx'],//接收的檔案尾碼        showUpload: true, //顯示批量上傳按鈕        showCaption: false,//是否顯示標題        browseClass: "btn btn-primary", //按鈕樣式           dropZoneEnabled: true,//是否顯示拖拽地區        //minImageWidth: 50, //圖片的最小寬度        //minImageHeight: 50,//圖片的最小高度        //maxImageWidth: 1000,//圖片的最大寬度        //maxImageHeight: 1000,//圖片的最大高度        //maxFileSize: 0,//單位為kb，如果為0表示不限制檔案大小        //minFileCount: 0,        maxFileCount: 100,        enctype: 'multipart/form-data',        validateInitialCount: true,        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",        msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！",      });      //匯入檔案上傳完成之後的事件      $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {      });    });  </script></head><body>  <p>     <form>      <p>        <p class="modal-header">          <h4 class="modal-title" id="myModalLabel">[請選擇xml/docx]檔案</h4>        </p>        <p class="modal-body">          <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />        </p>      </p>    </form>  </p></body></html>

後台：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.IO;using System.Xml;using System.Xml.Schema;namespace UploadTest.Controllers{  public class HomeController : Controller  {    //    // GET: /Home/    public ActionResult Index()    {      return View();    }    public JsonResult UploadFile()    {      uploadResult result = new uploadResult();      var oFile = Request.Files["txt_file"];      result.fileName = oFile.FileName;      Stream sm = oFile.InputStream;      byte[] bt= new byte[sm.Length];      sm.Read(bt, 0, (int)sm.Length);      FileStream fs = new FileStream(AppDomain.CurrentDomain.BaseDirectory+oFile.FileName,FileMode.Create);      fs.Write(bt, 0, bt.Length);      fs.Close();      fs.Dispose();      sm.Close();      sm.Dispose();      return Json(result, JsonRequestBehavior.AllowGet);    }    public class uploadResult    {      public string fileName { get; set; }      public string error { get; set; }    }  }}

為了在前台正確的顯示檔案的錯誤資訊，需要給前台返回一個帶有error欄位的json，其中error欄位時必須的，否則無法顯示後台回寫的錯誤訊息【這時必須的，官方文檔中明確指出】

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More