MVC文件上传支持批量上传拖拽及预览文件内容校验功能
程序员文章站
2023-11-29 21:34:10
网站中的上传相信大家都不陌生,也算是一个小小的技术难点,尤其时在asp.net中,上传的一些大小限制以及上传的进度的控制,以及用户体验等方面,今天在这里分享一个在asp.n...
网站中的上传相信大家都不陌生,也算是一个小小的技术难点,尤其时在asp.net中,上传的一些大小限制以及上传的进度的控制,以及用户体验等方面,今天在这里分享一个在asp.net mvc模式下的文件上传,同样适用于其它web类型bootstrap-fileinput .
它来自一个开源项目 git:
文档地址:
用一个下午的时间将文档通读了一次,并且做了根据文档指示做出了一个小型的demo,效果出奇的好,如下是效果图:
可以对文件预览筛选,从客户端就过滤一些不适用的文件,而且界面效果还特别美观
如下是使用方式:或者直接参照代码写就可以
使用方式:
1.nuget:install-package bootstrap-fileinput
2.语言本地化{下载fileinput_locale_zh.js}或者修改fileinput中的本地化词汇
下载地址: 【中文是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> <div> <form> <div> <div class="modal-header"> <h4 class="modal-title" id="mymodallabel">[请选择xml/docx]文件</h4> </div> <div class="modal-body"> <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> </div> </div> </form> </div> </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字段时必须的,否则无法显示后台回写的错误消息【这时必须的,官方文档中明确指出】
后台可以做到更细致的控制,并且支持多线程上传
推荐阅读
-
.net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)
-
MVC文件上传支持批量上传拖拽及预览文件内容校验功能
-
.net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)
-
基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
-
实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能的代码示例
-
.net core版上传文件/ 批量上传拖拽及预览功能(bootstrap fileinput上传文件)的实例详解
-
基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
-
.net core版上传文件/ 批量上传拖拽及预览功能(bootstrap fileinput上传文件)的实例详解
-
基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
-
实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能的代码示例