MVC文件上传支持批量上传拖拽及预览文件内容校验功能

网站中的上传相信大家都不陌生，也算是一个小小的技术难点，尤其时在ASP。网中，上传的一些大小限制以及上传的进度的控制，以及用户体验等方面，今天在这里分享一个在ASP。网最有价值球员模式下的文件上传，同样适用于其它网类型引导文件输入。

它来自一个开源项目git:https://github。com/kar tik-v/bootstrap-文件输入/

文档地址：http://插件。克拉吉。com/文件输入

用一个下午的时间将文档通读了一次，并且做了根据文档指示做出了一个小型的演示，效果出奇的好，如下是效果图：

可以对文件预览筛选，从客户端就过滤一些不适用的文件，而且界面效果还特别美观

如下是使用方式：或者直接参照代码写就可以

使用方式：

1 .nuget:安装-包引导-文件输入

2.语言本地化{下载fileinput_locale_zh.js}或者修改文件输入中的本地化词汇

下载地址：https://github。com/kartik-v/bootstrap-file input/tree/master/js/locales【中文是zh.js】

文档结构：

3.文件大小限制：修改fileinput.js中的3195行maxFilePreviewSize配置节点

maxFilePreviewSize: 25600，//25 MB默认是25M，根据需要手动调整

示例：前台-代码中的注释已经足够解释各配置项的作用，就不赘述了。

@ { Layout=null}！DOCTYPE htmlhtmlhead元名称=' viewport ' Content=' width=device-width '/title index/title script src=' http : ~/Scripts/jquery-1。9 .1 .js '/script script src=' http : ~/Scripts/bootstrap。js '/脚本链接href=' ~/Content/bootstrap。CSS“rel=”externano跟随“rel=”样式表/script src=' http : ~/Scripts/文件输入。js ' .var uploadrul='/Home/UploadFile '；控制。文件输入({ language : ' zh '，//设置语言uploadUrl: uploadrul，//上传的地址允许文件扩展名s 3360[' XML '，' docx']，//接收的文件后缀showUpload: true，//显示批量上传按钮showCaption: false，//是否显示标题浏览班级： ' BTN BTN-小学'，//按钮样式dropZoneEnabled: true，//是否显示拖拽区域//最小值宽度： 50,//图片的最小宽度//minimiegharth : 50，//图片的最小高度//maxImageWidth: 1000，//图片的最大宽度//maxImageHeight: 1000，//图片的最大高度//maxFileSize: 0，//单位为kb，如果为0表示不限制文件大小//minFileCount: 0，maxFileCount: 100，enctype: '多部分/表单-数据，validateinitialialcount : true，previewpileicon : ' I class=' glyphicon-glyphicon-king '/I '，msgFilesTooMany: '选择上传的文件数量({n})超过允许的最大数值{m}！", });//导入文件上传完成之后的事件$('#txt_file ').打开(' fileuploaded '，函数（事件、数据、预览、索引){ });});/script/head body div form div class=' modal-header ' H4 class=' modal-title ' id=' myModalLabel '[请选择xml/docx]文件/h4 /div div class='modal-body '输入类型=' file ' name=' txt _ file ' id=' txt _ file ' multiple class=' file-loading '/div/div/form/div/body/html后台：

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统网络。手动音量调节使用系统IO；使用系统Xml .使用系统Xml。计划命名空间上传测试.控制器{公共类Home Controller : Controller {////GET:/Home/public动作结果索引(){ return View()；} public JsonResult上传文件(){上传结果=新上传结果()；变量oFile=请求。文件[' txt _ file ']；result.fileName=oFile .文件名；流sm=oFile .输入流字节[] bt=新字节[sm .长度];sm .Read(bt，0)，(int)sm .长度);FileStream fs=新的文件流(AppDomain .文件的当前域基目录。文件名，文件模式。创建);fs .写(bt，0，bt .长度);fs .close()；fs .dispose()；sm .close()；sm .dispose()；返回Json(结果，JsonRequestBehavior .允许get)；}公共类uploadResult { public string FIlename { get；设置；}公共字符串错误{获取设置；} } }}为了在前台正确的显示文件的错误信息，需要给前台返回一个带有错误字段的json，其中错误字段时必须的，否则无法显示后台回写的错误消息【这时必须的，官方文档中明确指出】

后台可以做到更细致的控制，并且支持多线程上传