网站中的上传相信大家都不陌生，也算是一个小小的技术难点，尤其时在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. 改变nova-compute默认位置的方法

    # cat /etc/nova/nova.conf |grep -n state_path|grep -v '#'314:state_path=/var/lib/nova

  2. openstack创建实例测试步骤

    source admin-openrc.shkeystone user-create --name=demo --pass=123456keystone tenant-create --name=de ...

  3. BP神经网络的Java实现

    http://fantasticinblur.iteye.com/blog/1465497

  4. CentOS 6.4 x64 Percona-Server-5.6.15 源码安装

    首先下载 Percona-Server-5.6 http://www.percona.com/downloads/Percona-Server-5.6/LATEST/source/ 然后必须先安装cm ...

  5. (简单) POJ 3414 Pots，BFS+记录路径。

    Description You are given two pots, having the volume of A and B liters respectively. The following ...

  6. OPENCV之GFTT特征点检测

    之前角点检测的时候提到过角点检测的算法,第一个是cornerHarris计算角点,但是这种角点检测算法容易出现聚簇现象以及角点信息有丢失和位置偏移现象,所以后面又提出一种名为 shi_tomasi的角 ...

  7. ListView与RadioButton组合——自定义单选列表

      标签: radiobuttonlistviewandroidlayout 2013-09-10 11:13 19396人阅读 评论(8) 收藏 举报  分类: Android(19)  版权声明: ...

  8. iOS开发——An App ID with identifier "*****" is not avaliable

    Error: An App ID with identifier "*****" is not avaliable. Please enter a different string ...

  9. 关于Java在Linux or Android平台调用.so库

    Linux平台Java调用so库-JNI使用例子 android NDK开发及调用标准linux动态库.so文件 在Android项目中调用已有.so库 Android 调用.so文件 jni And ...

  10. Powerbuilder编程技巧 如何获取网页的HTML源码

    直接使用的三种方式 1.  PB内部对象 Inet object 2.  API 函数 3.  Ole中的Microsfot Web 游览器对象 一.Inet object: 1.Inet objec ...