网站中的上传相信大家都不陌生，也算是一个小小的技术难点，尤其时在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. [转] Eclipse 使用 Link 方式进行插件的安装

    下方来自 http://www.iteye.com/topic/1113353 Eclipse 的插件安装方法一般有以下几种(以安装 SVN 插件为例说明,Eclipse 版本为:3.7/Indigo ...

  2. angularJS 系列（二）——理解指令 understanding directives

    参考:https://github.com/angular/angular.js/wiki/Understanding-Directives Injecting, Compiling, and Lin ...

  3. COCOS2DX遇到的问题

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

  4. Unity3d ShaderLab之WorldNormalVector

    首先来看看Unity 3d官方文档上对WorldNormalVector的解释: float3 worldNormal; INTERNAL_DATA - will contain world norm ...

  5. (简单) POJ 1961 Period，扩展KMP。

    Description For each prefix of a given string S with N characters (each character has an ASCII code ...

  6. (简单) POJ 2387 Til the Cows Come Home，Dijkstra。

    Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...

  7. VI 摘要

    1  行首添加注释 1  :5,10s/^/#/g 2  sed '5,10s/^/#/' 2 替换某一个行 文本为 11111 22222 33333 替换: %s/\(.*\)/http:\/\/ ...

  8. CSharp笔记>>>多语言,注册

    C#多语言 方案1:http://blog.csdn.net/suncherrydream/article/details/43234059 http://blog.itpub.net/1263917 ...

  9. iOS开发——判断邮箱格式

    //判断邮箱格式 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@ ...

  10. iOS开发——生成条形码，二维码

    - (void)viewDidLoad { [super viewDidLoad]; self.imageView.image = [self generateBarCode:@"15248 ...