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

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)啟東免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

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

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

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

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

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

使用方式：

1.nuget:Install-Package bootstrap-fileinput

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

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

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

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

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

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

@{
  Layout = null;
}



  
  
  
  
  
  
  
  
  


  
 
    

      

        

          
[請選擇xml/docx]文件
        

        

          
        
      

    
  

后臺：

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字段時必須的，否則無法顯示后臺回寫的錯誤消息【這時必須的，官方文檔中明確指出】

感謝各位的閱讀！看完上述內(nèi)容，你們對如何實現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗功能大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：如何實現(xiàn)MVC文件上傳支持批量上傳拖拽及預(yù)覽文件內(nèi)容校驗功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://weahome.cn/article/shsih.html