网站中的上传相信大家都不陌生，也算是一个小小的技术难点，尤其时在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. 《JavaScript语言精髓与编程实践》读书笔记

    JavaScript语言精髓与编程实践读书笔记 function v1(v1){ v1 = 100; alert('v1:'+v1); } function v2(name){ v1.apply(th ...

  2. codeforce 611C New Year and Domino

    n*n预处理. 询问的时候用容斥,再删除边界. #include<cstdio> #include<cstring> #include<cmath> #includ ...

  3. awesome-deep-learning

    https://github.com/ChristosChristofidis/awesome-deep-learning

  4. MAC 10.10解决 PHP GD库的问题

    1. http://yangjunwei.com/a/1570.html 2. http://php-osx.liip.ch

  5. nginx+fastcgi php 使用file_get_contents、curl、fopen读取localhost本站点.php异常的情况

    原文:http://www.oicto.com/nginx_fastcgi_php_file_get_contents/ 参考:http://os.51cto.com/art/201408/44920 ...

  6. ionic系列

    1. 推荐中文API https://github.com/ychow/ionic-guide

  7. SVN参考命令

    SVN 命令参考(svn command reference) 用法: svn <subcommand> [options] [args]Subversion 命令行客户端,版本 1.6. ...

  8. Go Runtime hashmap实现

    努力学习go中,看到skoo博客内容很不错, 所以转载学习下 前两天有小伙伴问道是否看过 Go 语言 map 的实现,当时还真没看过,于是就花了一点时间看了一遍 runtime 源码中的 hashma ...

  9. Linux建立信任主机

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1.先在本机上面装一个sshpass 的安装包 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2.ssh-ke ...

  10. MySQL show slave status命令参数

    ? Slave_IO_State SHOW PROCESSLIST输出的State字段的拷贝.SHOW PROCESSLIST用于从属I/O线程.如果线程正在试图连接到主服务器,正在等待来自主服务器的 ...