源代码实例：https://github.com/kartik-v/bootstrap-fileinput

一、jsp页面

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 <%@ page buffer="16kb"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8" />

 <title>Data file input</title>

 <link

     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

     rel="stylesheet">

 <link href="css/uploadFile/fileinput.css" media="all" rel="stylesheet"

     type="text/css" />

 <link href="themes/uploadFile/explorer/theme.css" media="all"

     rel="stylesheet" type="text/css" />

 <script

     src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <script src="js/uploadFile/plugins/sortable.js" type="text/javascript"></script>

 <script src="js/uploadFile/fileinput.js" type="text/javascript"></script>

 <script src="js/uploadFile/fileinput_locale_fr.js"

     type="text/javascript"></script>

 <script src="js/uploadFile/fileinput_locale_es.js"

     type="text/javascript"></script>

 <script src="themes/uploadFile/explorer/theme.js" type="text/javascript"></script>

 <script

     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"

     type="text/javascript"></script>

 <script type="text/javascript">

 </script>

 </head>

 <body>

     <div class="container kv-main">

         <div class="page-header">

             <h1>Data File Input</h1>

         </div>

         <form id="uploadfileform" method="post" action="uploadFile"

             enctype=multipart/form-data>

             <div class="form-group">

                 <input id="file" type="file" name="file" class="file"

                     data-upload-url="#">

             </div>

             <div class="form-group">

                 <button class="btn btn-warning" type="button">Disable Test</button>

                 <button class="btn btn-info" type="reset">Refresh Test</button>

                 <!--   <button class="btn btn-primary" type="button" onclick=" judgeUpload();">Submit</button>-->

                 <button class="btn btn-primary" type="submit">Submit</button>

                 <button class="btn btn-default" type="reset">Reset</button>

             </div>

         </form>

         <br>

     </div>

 </body>

 <script type="text/javascript">

 $(function () {

     //0.初始化fileinput

     var oFileInput = new FileInput();

     oFileInput.Init("file", "/uploadFile");  //file为文件控件的id，uploadFile为后台接受上传文件的servlet

 });

 var FileInput = function () {

     var oFile = new Object();

     //初始化fileinput控件（第一次初始化）

     oFile.Init = function(ctrlName, uploadUrl) {

     var control = $('#' + ctrlName);

     //初始化上传控件的样式

     control.fileinput({

         language: 'zh', //设置语言

         uploadUrl: '/deke.Business/FileUploadServlet', //上传的地址即后台接受上传文件的servlet.

         allowedFileExtensions: ['csv', 'arff'],//接收的文件后缀

         showUpload: true, //是否显示上传按钮

         showCaption: false,//是否显示标题

         browseClass: "btn btn-primary", //按钮样式

         maxFileCount: 10, //表示允许同时上传的最大文件个数

         enctype: 'multipart/form-data',

         validateInitialCount:true,

         previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

         msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

     });

     //导入文件上传完成之后的事件

     $("#file").on("fileuploaded", function (event, data, previewId, index) {

         alert("上传成功");

     });

 }

     return oFile;

 };

 </script>

 </html>

注意事项：

1.引入bootstrap中的控件。

在该jsp页面中引入的js和css中最基本的两个控件是

bootstrap-fileinput/css/fileinput.min.css

bootstrap-fileinput/js/fileinput.min.js

其他的都是辅助样式。

2.两行关键代码：

<form id="uploadfileform" method="post" action="uploadFile" enctype=multipart/form-data> 
表单提交中的编码格式必须指定为 enctype=multipart/form-data 。
<input id="file" type="file" name="file" class="file" data-upload-url="#">
id="file" ：在jsp页面最后的提交表单的js函数中会用到。上述代码中的65行和85行。
data-upload-url="#"：这句代码删除之后，页面内的拖拽文件上传的布局会消失。（还不太清楚为什么。）
3.重要的JS初始化

1上述代码61-92行中的js脚本是用来初始化fileinput控件。
  其中最重要的是要指定文件上传的url(65行和75行),即文件要交给哪个servlet来处理。否则即使在表单中指定了action，后台也是无法接收到上传的文件。

2.fileinput()方法里面传入的是一个json数据，它里面有很多属性，每个属性代表着初始化上传控件的时候的特性。
如果这些属性都不设置，则表示使用默认的设置。
可以打开fileinput.js的源码，如图：



二、后台代码




 package deke.Business;

 import java.io.File;

 import java.io.IOException;

 import java.io.PrintWriter;

 import java.util.List;

 import javax.servlet.RequestDispatcher;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import javax.servlet.http.HttpSession;

 import org.apache.commons.fileupload.FileItem;

 import org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException;

 import org.apache.commons.fileupload.FileUploadException;

 import org.apache.commons.fileupload.disk.DiskFileItemFactory;

 import org.apache.commons.fileupload.servlet.ServletFileUpload;

 public class FileUploadServlet extends HttpServlet {

     private static final long serialVersionUID = 1L;

     // location to store file uploaded

     private static final String UPLOAD_DIRECTORY = "upload";

     // upload settings

     private static final int MEMORY_THRESHOLD   = 1024 * 1024 * 3;

     private static final int MAX_FILE_SIZE      = 1024 * 1024 * 40;

     private static final int MAX_REQUEST_SIZE   = 1024 * 1024 * 50; 

     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

         response.setCharacterEncoding("GBK");

         PrintWriter out = response.getWriter();

         if (!ServletFileUpload.isMultipartContent(request)) {

             out.println("Error: Form must has enctype=multipart/form-data.");

             out.flush();

             return;

         }

         DiskFileItemFactory factory = new DiskFileItemFactory();

         factory.setSizeThreshold(MEMORY_THRESHOLD);

         factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

         ServletFileUpload upload = new ServletFileUpload(factory);

         upload.setFileSizeMax(MAX_FILE_SIZE);

         upload.setSizeMax(MAX_REQUEST_SIZE);

         String uploadPath = getServletContext().getRealPath("") + File.separator + UPLOAD_DIRECTORY;

         File uploadDir = new File(uploadPath);

         if (!uploadDir.exists()) {

             uploadDir.mkdir();

         }

         List<FileItem> formItems = null;

         try {

             formItems = upload.parseRequest(request);

             if(formItems == null || formItems.size() == 0) {

                 response.sendRedirect("main.jsp");

                 return;

             }

             for (FileItem item : formItems) {

                 if (!item.isFormField()) {

                     String fileName = new File(item.getName()).getName();

                     String filePath = uploadPath + File.separator + fileName;

                     File storeFile = new File(filePath);

                     item.write(storeFile);

                     HttpSession mysession = request.getSession();

                     mysession.setAttribute("fileName", fileName);

                     mysession.setAttribute("filePath", filePath);

                     mysession.setAttribute("uploadFile", storeFile);

                 }

             }

         } catch (FileUploadException e) {

             if (e instanceof SizeLimitExceededException) {

                 out.print("<script>alert('文件上传超过最大限制:" + MAX_FILE_SIZE + "瀛楄妭');history.back();</script>");

                 return;

             }

         } catch (Exception e) {

             e.printStackTrace();

         }

         request.getRequestDispatcher("/main.jsp").forward(request,response);

     }

 }




关于中文显示问题：


1.文件上传控件的中文显示问题。


图中的“选择”按钮和“拖拽文件”默认显示为英文，若想做到中文显示。需要两步：


第一步：修改fileinput.js文件


打开fileinput.js文件，修改如下几处原来的en为zh：


1。   lang = options.language || self.data('language') || 'zh', opts;


2。   if (lang !== 'zh' && !isEmpty($.fn.fileinputLocales[lang])) {


3。  opts = $.extend(true, {}, $.fn.fileinput.defaults, t, $.fn.fileinputLocales.zh, l, options,


4。  language: 'zh',


第二步：在jsp页面内引入本地化的js  ：zh.js




<script src="js/uploadFile/locales/zh.js"  type="text/javascript"></script>　






2.上传文件中的中文乱码问题。


上传的文件中如果包含中文，会出现中文乱码问题。原因是，文件的编码不是utf-8格式，手工将文件的编码格式转成utf-8即可。


												


											
利用bootsrap控件 实现文件上传功能的更多相关文章
	

    
								
  1. 037. asp.netWeb用户控件之五使用用户控件实现文件上传功能
		
    fileUpload.ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile= ...
    
		
    2. 
						
  2. 在EasyUI项目中使用FileBox控件实现文件上传处理
		
    我在较早之前的随笔<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是J ...
    
		
    3. 
						
  3. WebForm之FileUpload控件（文件上传）
		
    FileUpload控件要与Button.LinkButton.ImageButton配合使用 FileUpload控件的方法及属性: 1.SaveAs("要上传到服务器的绝对路径" ...
    
		
    4. 
						
  4. .Net  neatupload上传控件实现文件上传的进度条
		
    1. 引入bin文件 (可以到neatupload官网下载,也可以到教育厅申报系统中找) 2. 将控件加入到工具栏,在工具栏中点鼠标右键,如图: 3. 加入neatuplaod这个文件夹(可以到nea ...
    
		
    5. 
						
  5. php利用iframe实现无刷新文件上传功能
		
    上传原理很简单就是利用表单的打开方式为iframe的name名,这样就可以在当前页面的iframe打来了,实现文件上传,再利用js返回上传结果. form target .在 action 属性中规定 ...
    
		
    6. 
						
  6. 利用Struts2拦截器完成文件上传功能
		
    Struts2的图片上传以及页面展示图片 在上次的CRUD基础上加上图片上传功能 (https://www.cnblogs.com/liuwenwu9527/p/11108611.html) 文件上传 ...
    
		
    7. 
						
  7. FileUpload控件「批次上传 / 多档案同时上传」的范例--以「流水号」产生「变量名称」
		
    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/19/multiple_fileupload_asp_net_20130819. ...
    
		
    8. 
						
  8. 利用spring的MultipartFile实现文件上传【原】
		
    利用spring的MultipartFile实现文件上传 主要依赖jar包 spring-web-3.0.6.RELEASE.jar 用到 (org.springframework.web.multi ...
    
		
    9. 
						
  9. MVC5：使用Ajax和HTML5实现文件上传功能
		
    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. git使用命令行方式提交代码到github或gitlab上
			
    (1)使用命令行(Git Bash)在gitlab上新建项目的流程   //进入项目目录下: C:\Users\wuwy>cd D:\workspace\eclipse\H5Patient\// ...
    
			
    2. 
						
  2. OGEngine教程：字体工具使用
			
    1.打开 BitmapFont tool,在红框中输入你要显示的字. 2.写完后保存字体文件 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3Jhbmdl ...
    
			
    3. 
						
  3. c3p0;jdbc;dbcp；mybatis；ubutils；
			
    [说明]今天还是完成了一定东西的,上午是jdbc的测试,下午是 数据库连接池 和 dbutils 的测试,晚上是mybatis的测试,都是找了一些网上的例子运行了一下,解决出现的问题. 一:今日完成  ...
    
			
    4. 
						
  4. 【BZOJ2337】[HNOI2011]XOR和路径 期望DP+高斯消元
			
    [BZOJ2337][HNOI2011]XOR和路径 Description 题解:异或的期望不好搞?我们考虑按位拆分一下. 我们设f[i]表示到达i后,还要走过的路径在当前位上的异或值得期望是多少( ...
    
			
    5. 
						
  5. 九度OJ 1354：和为S的连续正数序列 （整除）
			
    时间限制:2 秒 内存限制:32 兆 特殊判题:否 提交:2028 解决:630 题目描述: 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不 ...
    
			
    6. 
						
  6. 2017-2018-1 20179209《Linux内核原理与分析》第十周作业
			
    设备与模块 设备分类 块设备 块设备可以以块为单位寻址,块大小随设备不同而不同:设备通常支持重定位操作,也就是对数据的随机访问.块设备的例子有外存,光盘等. 字符设备 字符设备不可寻址,仅供数据的流式 ...
    
			
    7. 
						
  7. 改善程序与设计的55个具体做法 day8
			
    条款20:宁以pass-by-reference-to-const 替换 pass-by-value 即 以const引用 替换值传递. 采用引用传递参数时,底层往往是用指针方式实现,因此参数传递内置 ...
    
			
    8. 
						
  8. 使用documentFragment
			
    function insertHtml(range, val) { var doc = range.doc, frag = doc.createDocumentFragment(); K('@' +  ...
    
			
    9. 
						
  9. rails数据验证
			
    @user1 = :name => "zhou" 与 @user2 = :name=> "ZHOU" 在为保存之前都有可能通过第一关validate ...
    
			
    10. 
						
  10. 2018年长沙理工大学第十三届程序设计竞赛  G	逃离迷宫 【BFS】
			
    链接:https://www.nowcoder.com/acm/contest/96/G 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536 ...
    
			
    11.