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;
}
<!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="external nofollow" 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="external nofollow" 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: 100,
        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, 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字段时必须的,否则无法显示后台回写的错误消息【这时必须的,官方文档中明确指出】

后台可以做到更细致的控制,并且支持多线程上传

时间: 2017-03-24

Java Spring MVC 上传下载文件配置及controller方法详解

下载: 1.在spring-mvc中配置(用于100M以下的文件下载) <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> <property name="messageConverters"> <list> <!--配置下载返回类型--> <bean class="or

ASP.NET MVC 文件上传教程(一)

这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看. Upload File(一) 我们在默认创建的项目中的Home控制器下添加如下: public ActionResult UploadFile() { return View(); } [HttpPost] public ActionResult UploadFile(HttpPostedFileBase file) { var fileName = file.FileName; var filePath = Server

MyBatis与SpringMVC相结合实现文件上传、下载功能

环境:maven+SpringMVC + Spring + MyBatis + MySql 本文主要说明如何使用input上传文件到服务器指定目录,或保存到数据库中:如何从数据库下载文件,和显示图像文件并实现缩放. 将文件存储在数据库中,一般是存文件的byte数组,对应的数据库数据类型为blob. 首先要创建数据库,此处使用MySql数据库. 注意:文中给出的代码多为节选重要片段,并不齐全. 1. 前期准备 使用maven创建一个springMVC+spring+mybatis+mysql的项目

ASP.NET MVC5实现文件上传与地址变化处理(5)

一.上传文件和重复文件处理 文件处理的原则是:不在数据库中保存文件,只在数据库中保存文件信息(Hash值等).采取文件的MD5重命名文件在一般情况足够处理文件的重复问题,强迫症倾向则可以考虑将MD5和其他摘要算法结合. public static string Save(HttpPostedFileBase file, string path) { var root = "~/Upload/" + path + "/"; var phicyPath = Hostin

SpringMVC文件上传的配置实例详解

记述一下步骤以备查. 准备工作: 需要把Jakarta Commons FileUpload及Jakarta Commons io的包放lib里. 我这边的包是: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 然后在spring-servlet.xml进行multipartResolver配置,不配置好上传会不好用. <bean id="multipartResolver" class="org.springfram

Spring MVC中上传文件实例

SpringMVC(注解)上传文件需要注意的几个地方: 1.form的enctype="multipart/form-data",这个是上传文件必须的 2.applicationContext.xml配置: 复制代码 代码如下: <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipartResolver" class="org.springframework.w

详解SpringMVC使用MultipartFile实现文件的上传

如果需要实现跨服务器上传文件,就是将我们本地的文件上传到资源服务器上,比较好的办法就是通过ftp上传.这里是结合SpringMVC+ftp的形式上传的.我们需要先懂得如何配置springMVC,然后在配置ftp,最后再结合MultipartFile上传文件. springMVC上传需要几个关键jar包,spring以及关联包可以自己配置,这里主要说明关键的jar包 1:spring-web-3.2.9.RELEASE.jar (spring的关键jar包,版本可以自己选择) 2:commons-

SpringMvc导出Excel实例代码

前言 相信很多朋友在实际工作中都会要将数据导出成Excel的需求,通常这样的做法有两种. 一是采用JXL来生成Excel,之后保存到服务器,然后在生成页面之后下载该文件. 二是使用POI来生成Excel,之后使用Stream的方式输出到前台直接下载(ps:当然也可以生成到服务器中再下载.).这里我们讨论第二种. Struts2的方式 通常我会将已经生成好的HSSFWorkbook放到一个InputStream中,然后再到xml配置文件中将返回结果更改为stream的方式.如下: private

SpringMVC上传文件的三种实现方式

SpringMVC上传文件的三种实现方式,直接上代码吧,大伙一看便知 前台: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

jquery.form.js框架实现文件上传功能案例解析(springmvc)

上一篇 Bootstrap自定义文件上传下载样式(http://www.jb51.net/article/85156.htm)已经有一段时间了,一直在考虑怎么样给大家提交一篇完美的逻辑处理功能.现在我结合自己的实际工作给大家分享一下. 使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSu

springMVC实现前台带进度条文件上传的示例代码

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件;效果截图如下: 详细实现如下: 1.mvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/s

springMVC配置环境实现文件上传和下载

最近的项目中用到了文件的上传和下载功能,我觉着这个功能比较重要,因此特意把它提取出来自己进行了尝试. 下面就是springMVC配置环境实现文件上传和下载的具体步骤,供大家参考,具体内容如下 一. 基础配置: maven导包及配置pom.xml,导包时除开springmvc的基础依赖外,需要导入文件上传下载时用到的commons-io.jsr和commons-fileupload.jar: <project xmlns="http://maven.apache.org/POM/4.0.0&

springMVC结合AjaxForm上传文件

最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 在spring-servlet.xml进行multipartResolver配置: <bean id="multipartResolver" class="org.springf

PHP+AjaxForm异步带进度条上传文件实例代码

在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: var object= { url:url, //form提交数据的地址 type:type, //form提交的方式(method:post/get) target:target, //服务器返回的响应数据显示的元素(Id)号 beforeSerialize:function(){} //序列化提交

springmvc利用jquery.form插件异步上传文件示例

需要的下载文件: jQuery.form.js jquery.js commons-fileupload.jar commons-io.jar 示例图片 pom.xml <!-- 文件上传 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</ve

SpringMVC上传文件的简单实例

SpringMVC上传文件的简单实例 在使用springMVC进行系统实现时,springMVC默认的解析器里面是没有加入对文件上传的解析的,这可以方便我们实现自己的文件上传.但如果你想使用springMVC对文件上传的解析器来处理文件上传的时候就需要在spring的applicationContext里面加上springMVC提供的MultipartResolver的申明.这样之后,客户端每次进行请求的时候,springMVC都会检查request里面是否包含多媒体信息,如果包含了就会使用Mu

SpringMVC + jquery.uploadify实现上传文件功能

前言 以前用Asp.net MVC+uploadify上传文件,最近学习SpringMVC,所以就用SpringMVC+uploadify做个上传文件的demo. 刚开始用form表单的方式提交,在Controller Action中用@RequestParam MultipartFile file就能拿到上传文件信息.后我直接使用uploadify的方式上传,接口没有做任何调整,上传的过程中报http400, 客户端的请求不符合接口的要求,表单post提交时报文参数是以Form Data方式,

SpringMVC上传文件的两种方法

在该示例中,阐述了SpringMVC如何上传文件. 1.上传页面upload.jsp <body> <form action="/TestSpringMVC3/data/uploadfile" enctype="multipart/form-data" method="post"> file:<input type="file" name="file"><br>

SpringMVC上传文件FileUpload使用方法详解

本文实例为大家分享了SpringMVC上传文件FileUpload的具体代码,供大家参考,具体内容如下 我是在已经搭建好的springMVC环境下,maven工程中的pom.xml所需要的jar包(其中spring上传文件的两个主要jar:commons-fileupload.jar和commons-io.jar): <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.o

SpringMVC上传文件并保存到本地代码实例

这篇文章主要介绍了SpringMVC上传文件并保存到本地代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 基本的MVC配置就不展示了,这里给出核心代码 在spring-mvc的配置文件中写入如下配置 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"

SpringMVC 上传文件 MultipartFile 转为 File的方法

在使用 SpringMVC 上传文件时,接收到的文件格式为 MultipartFile,但是在很多场景下使用都需要File格式的文件,记录下以便日后使用. 以下mFile为MultipartFile文件 此方法会在本地产生临时文件,使用完毕需要删除 在网上搜索未发现可直接使用的不产生临时文件的方法,查到几个本地测试皆无法通过,如哪位有不产生临时文件的方法,请多多指教