溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何實現MVC文件上傳支持批量上傳拖拽及預覽文件內容校驗功能？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
網站中的上傳相信大家都不陌生，也算是一個小小的技術難點，尤其時在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">
<h5 class="modal-title" id="myModalLabel">[請選擇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>后臺：
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字段時必須的，否則無法顯示后臺回寫的錯誤消息【這時必須的，官方文檔中明確指出】
感謝各位的閱讀！看完上述內容，你們對如何實現MVC文件上傳支持批量上傳拖拽及預覽文件內容校驗功能大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
