您现在的位置是:网站首页> 编程资料编程资料
MVC文件上传支持批量上传拖拽及预览文件内容校验功能_实用技巧_
2023-05-24
432人已围观
简介 MVC文件上传支持批量上传拖拽及预览文件内容校验功能_实用技巧_
网站中的上传相信大家都不陌生,也算是一个小小的技术难点,尤其时在asp.net中,上传的一些大小限制以及上传的进度的控制,以及用户体验等方面,今天在这里分享一个在asp.net mvc模式下的文件上传,同样适用于其它web类型bootstrap-fileinput .
它来自一个开源项目 git:https://github.com/kartik-v/bootstrap-fileinput/
文档地址:http://plugins.krajee.com/file-input
用一个下午的时间将文档通读了一次,并且做了根据文档指示做出了一个小型的demo,效果出奇的好,如下是效果图:


可以对文件预览筛选,从客户端就过滤一些不适用的文件,而且界面效果还特别美观
如下是使用方式:或者直接参照代码写就可以
使用方式:
1.nuget:Install-Package bootstrap-fileinput

2.语言本地化{下载fileinput_locale_zh.js}或者修改Fileinput中的本地化词汇
下载地址:https://github.com/kartik-v/bootstrap-fileinput/tree/master/js/locales 【中文是zh.js】
文档结构:

3.文件大小限制:修改fileinput.js中的3195行 maxFilePreviewSize配置节点
maxFilePreviewSize: 25600, // 25 MB 默认是25M,根据需要手动调整
示例:前台 --代码中的注释已经足够解释各配置项的作用,就不赘述了.
@{ Layout = null; } Index 后台:
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字段时必须的,否则无法显示后台回写的错误消息【这时必须的,官方文档中明确指出】
后台可以做到更细致的控制,并且支持多线程上传
- springMVC实现前台带进度条文件上传的示例代码
- SpringMvc导出Excel实例代码
- SpringMVC上传文件的三种实现方式
- 详解SpringMVC使用MultipartFile实现文件的上传
- Java Spring MVC 上传下载文件配置及controller方法详解
- springMVC结合AjaxForm上传文件
- MyBatis与SpringMVC相结合实现文件上传、下载功能
- jquery.form.js框架实现文件上传功能案例解析(springmvc)
- ASP.NET MVC 文件上传教程(一)
- springMVC配置环境实现文件上传和下载
- SpringMVC文件上传的配置实例详解
- ASP.NET MVC5实现文件上传与地址变化处理(5)
- Spring MVC中上传文件实例
相关内容
- .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)_实用技巧_
- ASP.NET MVC4 利用uploadify.js多文件上传_实用技巧_
- 模拟HTTP请求实现网页自动操作及数据采集的方法_实用技巧_
- WPF实现slide控件拖动完成后改变变量值_实用技巧_
- ASP.NET数据绑定控件详解_实用技巧_
- 详解ASP.NET Core MVC 源码学习:Routing 路由_实用技巧_
- ASP .NET 可编辑输入自动匹配的下拉框_实用技巧_
- Asp .net 调用带参数的存储过程_实用技巧_
- ASP.NET使用ajax实现分页局部刷新页面功能_实用技巧_
- 使用Topshelf组件构建简单的Windows服务_实用技巧_
