网站中的上传相信大家都不陌生，也算是一个小小的技术难点，尤其时在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;

}

<!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="stylesheet" />

    <script src="~/Scripts/fileinput.js"></script>

    <script src="~/Scripts/fileinput_locale_zh.js"></script>

    <link href="~/Content/bootstrap-fileinput/css/fileinput.css" 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: ,

                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, , (int)sm.Length);

            FileStream fs = new FileStream(AppDomain.CurrentDomain.BaseDirectory+oFile.FileName,FileMode.Create);

            fs.Write(bt, , 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文件上传支持批量上传，拖拽以及预览，文件内容校验等的更多相关文章

  1. .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  2. Sublime、Webstorm等在APICloud平台上全面支持WiFi真机同步和实时预览功能

    APICloud工具插件包括APICloud Studio.Sublime Text和Webstorm全面为开发者提供iOS和Android平台真机同步调试功能,不仅可以通过USB方式进行APP真机同 ...

  3. 解决微信官方SDK给出1.4.0等版本没有预览文件(previewFile)等接口

    使用苹果手机测试 调用微信的js-sdk在系统中实现上传.预览附件的功能.在自己的手机测试通过后,直接丢给QA测试了 本以为相安无事了,没想到QA用安卓手机测的时候居然不得,使用的是下载下来的jwei ...

  4. 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0

    实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...

  5. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

  7. #网页中动态嵌入PDF文件/在线预览PDF内容#

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  8. Windows-快速预览文件-QuickLook

    开源.免费的文件快速预览工具, 支持图片.文档.音视频.代码文本.压缩包等多种格式. 获得 Mac OS 空格键快速预览文件相同的体验 效果图 文件夹 音视频 浏览 压缩包,文本 支持的格式: 图片: ...

  9. PHP实现阿里云OSS文件上传(支持批量)

    上传文件至阿里云OSS,整体逻辑是,文件先临时上传到本地,然后在上传到OSS,最后删除本地的临时文件(也可以不删,具体看自己的业务需求),具体实现流程如下:   1.下载阿里云OSS对象上传SDK(P ...

随机推荐

  1. JQuery中的相反的地方

    1.on和delegate的参数顺序相反 2.each和map参数也是相反的

  2. jquery如何判断元素是否被点击_百度知道

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div id="parent"> <a id="a1" ...

  3. COCOS2DX遇到的问题

    1 新增类无法在别的类里面include到的问题: 去项目-> 配置属性-> C/C++-> 常规-> 附加包含目录中增加类的文件夹路径 2 新增类出现 extensions\ ...

  4. Tomcat 静态部署 二步特别注意

    一.修改server.xml 在Host 节点添加如下配置 <!-- path 为请求url地址 docBase 为项目文件绝对地址制定到WebContent根目录下 --> <Co ...

  5. Sping--life cycle

    bean.xml: 注意, 千万不要后面加上 scope="prototype" <?xml version="1.0" encoding="U ...

  6. java 生成不重复的随机数

    import java.text.SimpleDateFormat;import java.util.Date; public class Test2 { public static void mai ...

  7. html 设置页脚div一直在页面底部

    先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...

  8. UDP传输包大小（转）

    源:UDP传输包大小 在进行UDP编程的时候,我们最容易想到的问题就是,一次发送多少bytes好? 当然,这个没有唯一答案,相对于不同的系统,不同的要求,其得到的答案是不一样的,我这里仅对 像ICQ一 ...

  9. 使用Cookie记住用户名和密码

    Login.jsp <form name = "f1" method="get" action="servlet/LoginServlet&qu ...

  10. 由浅入深Mysql优化

    选Mysql优化作为我的第一篇博文,实在是因为这个东西很有意思,也是能体现后端开发人员设计细节及逻辑分析的一个知识点. 那么来吧: 作为Mysql优化,很多人大概能跟着感觉说出如下   :  (1)常 ...