溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何實(shí)現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗(yàn)功能

發(fā)布時(shí)間：2020-10-15 16:54:57 來(lái)源：億速云 閱讀：143 作者：小新 欄目：編程語(yǔ)言

如何實(shí)現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗(yàn)功能？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

網(wǎng)站中的上傳相信大家都不陌生，也算是一個(gè)小小的技術(shù)難點(diǎn)，尤其時(shí)在asp.net中，上傳的一些大小限制以及上傳的進(jìn)度的控制，以及用戶體驗(yàn)等方面，今天在這里分享一個(gè)在asp.net mvc模式下的文件上傳，同樣適用于其它web類型bootstrap-fileinput .

它來(lái)自一個(gè)開源項(xiàng)目 github.com/kartik-v/bootstrap-fileinput/

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

用一個(gè)下午的時(shí)間將文檔通讀了一次，并且做了根據(jù)文檔指示做出了一個(gè)小型的demo，效果出奇的好，如下是效果圖：

如何實(shí)現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗(yàn)功能

如何實(shí)現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗(yàn)功能

可以對(duì)文件預(yù)覽篩選，從客戶端就過(guò)濾一些不適用的文件，而且界面效果還特別美觀

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

使用方式：

1.nuget:Install-Package bootstrap-fileinput

如何實(shí)現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗(yàn)功能

2.語(yǔ)言本地化｛下載fileinput_locale_zh.js｝或者修改Fileinput中的本地化詞匯

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

文檔結(jié)構(gòu)：

如何實(shí)現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗(yàn)功能

3.文件大小限制：修改fileinput.js中的3195行 maxFilePreviewSize配置節(jié)點(diǎn)

maxFilePreviewSize: 25600, // 25 MB  默認(rèn)是25M，根據(jù)需要手動(dòng)調(diào)整

示例：前臺(tái)  --代碼中的注釋已經(jīng)足夠解釋各配置項(xiàng)的作用，就不贅述了.

@{
  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', //設(shè)置語(yǔ)言
        uploadUrl: uploadrul, //上傳的地址
        allowedFileExtensions: ['xml','docx'],//接收的文件后綴
        showUpload: true, //顯示批量上傳按鈕
        showCaption: false,//是否顯示標(biāo)題
        browseClass: "btn btn-primary", //按鈕樣式   
        dropZoneEnabled: true,//是否顯示拖拽區(qū)域
        //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: "選擇上傳的文件數(shù)量({n}) 超過(guò)允許的最大數(shù)值{m}！",
      });
      //導(dǎo)入文件上傳完成之后的事件
      $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
      });
    });
  </script>
</head>
<body>
  <p> 
    <form>
      <p>
        <p class="modal-header">
          <h5 class="modal-title" id="myModalLabel">[請(qǐng)選擇xml/docx]文件</h5>
        </p>
        <p class="modal-body">
          <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
        </p>
      </p>
    </form>
  </p>
</body>
</html>

后臺(tái)：

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

為了在前臺(tái)正確的顯示文件的錯(cuò)誤信息，需要給前臺(tái)返回一個(gè)帶有error字段的json，其中error字段時(shí)必須的，否則無(wú)法顯示后臺(tái)回寫的錯(cuò)誤消息【這時(shí)必須的，官方文檔中明確指出】

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)如何實(shí)現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗(yàn)功能大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手