bootstrap FileInput多文件上传插件使用详解(包括Java代码)

Bootstrap FileInput多文件上传插件使用详解(包括Java代码)

转自 https://blog.csdn.net/qq_28550739/article/details/53436080

网上翻阅了很多教程，但是都不全面，经过一番研究之后终于成功上传了文件

一、需要引用的资源

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="assets/bootstrap-table/src/bootstrap-table.css"><link rel="stylesheet" href="assets/examples.css"><script src="assets/jquery.min.js"></script><script src="assets/bootstrap/js/bootstrap.min.js"></script><script src="assets/bootstrap-table/src/bootstrap-table.js"></script><script src="assets/ga.js"></script><link type="text/css" rel="stylesheet" href="bootstrap-fileinput-master/css/fileinput.css" /><script type="text/javascript" src="bootstrap-fileinput-master/js/fileinput.js"></script><script type="text/javascript" src="bootstrap-fileinput-master/js/locales/zh.js"></script>

因为该插件基于Bootstrap和jQuery，所以需要引入js和css文件，同时如果想要使插件语言变成中文，也要引入对应的语言文件，中文为zh.js

二、html代码部分

<div class="container-fluid"><form id="form" action="upload/insert" method="post" enctype="multipart/form-data"><div class="row form-group"><label class="col-md-4">图片上传:</label><div class="col-sm-12"><input id="input-id" name="file" multiple type="file" data-show-caption="true"></div></div></form>
</div>

注意：有的教程在input标签上加了class=”file”，这个class会导致插件一直是英文，即语言切换失效，解决方式很简单，把class=”file”去掉即可。

三、JS代码部分

 $(function () {initFileInput("input-id");})function initFileInput(ctrlName) {var control = $('#' + ctrlName);control.fileinput({language: 'zh', //设置语言uploadUrl: "upload/insert", //上传的地址allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀//uploadExtraData:{"id": 1, "fileName":'123.mp3'},uploadAsync: true, //默认异步上传showUpload: true, //是否显示上传按钮showRemove : true, //显示移除按钮showPreview : true, //是否显示预览showCaption: false,//是否显示标题browseClass: "btn btn-primary", //按钮样式//dropZoneEnabled: true,//是否显示拖拽区域//minImageWidth: 50, //图片的最小宽度//minImageHeight: 50,//图片的最小高度//maxImageWidth: 1000,//图片的最大宽度//maxImageHeight: 1000,//图片的最大高度//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小//minFileCount: 0,//maxFileCount: 10, //表示允许同时上传的最大文件个数enctype: 'multipart/form-data',validateInitialCount:true,previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",}).on('filepreupload', function(event, data, previewId, index) {     //上传中var form = data.form, files = data.files, extra = data.extra,response = data.response, reader = data.reader;console.log('文件正在上传');}).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功console.log('文件上传成功！'+data.id);}).on('fileerror', function(event, data, msg) {  //一个文件上传失败console.log('文件上传失败！'+data.id);})}

其中常用的基础参数、回调函数都有注释。

四、Java代码部分

package com.ssm.controller;import java.io.File;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;import com.diecolor.utils.Constants;
import com.diecolor.utils.FileUtil;
import com.diecolor.utils.TimeUtils;@Controller
@RequestMapping("/upload")
public class UploadController {/*** 上传文件* @param request* @param response* @param file 上传的文件，支持多文件* @throws Exception*/@RequestMapping("/insert")public void insert(HttpServletRequest request,HttpServletResponse response,@RequestParam("file") MultipartFile[] file) throws Exception{if(file!=null&&file.length>0){//组合image名称，“;隔开”List<String> fileName =new ArrayList<String>();try {for (int i = 0; i < file.length; i++) {if (!file[i].isEmpty()) {//上传文件，随机名称，";"分号隔开fileName.add(FileUtil.uploadImage(request, "/upload/"+TimeUtils.formateString(new Date(), "yyyy-MM-dd")+"/", file[i], true));}}//上传成功if(fileName!=null&&fileName.size()>0){System.out.println("上传成功！");Constants.printJson(response, fileName);;}else {Constants.printJson(response, "上传失败！文件格式错误！");}} catch (Exception e) {e.printStackTrace();Constants.printJson(response, "上传出现异常！异常出现在：class.UploadController.insert()");}}else {Constants.printJson(response, "没有检测到文件！");}}
}

uploadImage()方法：(支持随机名称)

/*** 上传图片*  原名称* @param request 请求* @param path_deposit 存放位置(路径)* @param file 文件* @param isRandomName 是否随机名称* @return 完整文件路径*/public static String uploadImage(HttpServletRequest request,String path_deposit,MultipartFile file,boolean isRandomName) {//上传try {String[] typeImg={"gif","png","jpg"};if(file!=null){String origName=file.getOriginalFilename();// 文件原名称System.out.println("上传的文件原名称:"+origName);// 判断文件类型String type=origName.indexOf(".")!=-1?origName.substring(origName.lastIndexOf(".")+1, origName.length()):null;if (type!=null) {boolean booIsType=false;for (int i = 0; i < typeImg.length; i++) {if (typeImg[i].equals(type.toLowerCase())) {booIsType=true;}}//类型正确if (booIsType) {//存放图片文件的路径String path=request.getSession().getServletContext().getRealPath(path_deposit);//组合名称String fileSrc=""; //是否随机名称if(isRandomName){origName=TimeUtils.formateString(new Date(), "yyyy-MM-dd-")+UUID.randomUUID().toString()+origName.substring(origName.lastIndexOf("."));}//判断是否存在目录File targetFile=new File(path,origName);if(!targetFile.exists()){targetFile.mkdirs();//创建目录}//上传file.transferTo(targetFile);//完整路径fileSrc=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+path_deposit+origName;System.out.println("图片上传成功:"+fileSrc);return fileSrc;}}}return null;}catch (Exception e) {e.printStackTrace();return null;}}

当前使用的是SpringMVC框架，该插件上传文件的后台代码与普通文件上传的代码相同。

五、一些参数配置

showCaption：是否显示文件的标题。默认值true。 showPreview：是否显示文件的预览图。默认值true。
showRemove：是否显示删除/清空按钮。默认值true。
showUpload：是否显示文件上传按钮。默认是submit按钮，除非指定了uploadUrl属性。默认值true。
showCancel：是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true。
captionClass：在标题容器上额外的class。类型string。
previewClass：在预览区域容器上的额外的class。类型string。
mainClass：添加在文件上传主容器。类型string。
initialDelimiter：在initialPreview属性中用于上传多个文件时的分隔符。默认值：’$$‘。
initialPreview：类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串，会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组，初始化预览图中会显示数组中所有的文件。

六、官网

http://plugins.krajee.com/file-input

bootstrap FileInput多文件上传插件使用详解(包括Java代码)相关推荐

fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
SSM框架基于Bootstrap fileinput 实现文件上传功能
SSM框架基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...
fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解，最近时间空余，总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...
Struts文件上传与下载详解_上传单个文件
大家都知道Servlet上传文件的时候用的是commons-fileupload插件上传的,但是过程极其的麻烦,同样Struts2也有自带的文件上传,但是过程比Servlet里面的简单了不少,接下来请 ...
JQuery上传插件Uploadify详解及其中文按钮解决方案
网上找了一天,大家都说Uploadify唯一的缺点就是不支持中文按钮,杯具之前,我看了下Uploadify的API,才发现了几个参数没被大家提及的,这正是解决此问题的关键.(以后坚决养成没事就看API ...
upload-labs-master文件上传漏洞靶场详解（1-17）
目录前言 pass-01 pass-02 pass-03 pass-04 pass-05 pass-06 pass-07 pass-08 pass-09 pass-10 pass-11 pass-1 ...
netcore 图片文件大小_NetCore 3.0文件上传和大文件上传的限制详解
NetCore文件上传两种方式 NetCore官方给出的两种文件上传方式分别为"缓冲"."流式".我简单的说说两种的区别, 1.缓冲:通过模型绑定先把整个文件保 ...
php 文件上传页面模板,PHP文件上传类实例详解
本文实例讲述了PHP文件上传类.分享给大家供大家参考,具体如下: 这里演示了FileUpload.class.php文件上传类,其中用到了两个常量,可在网站配置文件中定义: define('ROOT_ ...
Struts文件上传与下载详解_文件的下载
在两篇我们主要说的是文件的上传,既然有上传那就有下载,那么咱们看一下struts里面是怎么个下载法! 1.写个文件下载的表单页面: <a href="downLoad.action? ...
Struts文件上传与下载详解 _上传多个文件
在上一篇中给大家列出的单个文件的上传,那么这一篇咱们讲讲上传多个文件改怎么作呢?由于过程和上传单个文件的类似,所以在这里不细说,相信大家都能看懂,看不懂的可以在评论区留言,我看到之后会及时回复的!! ...