它来自一个开源项目 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字段时必需的，不然没法显现背景回写的毛病音讯【这时候必需的，官方文档中明确指出】
以上就是完成MVC文件上传支撑批量上传拖拽及预览文件内容校验功用的代码示例的细致内容，更多请关注ki4网别的相干文章！
