bootstrap FileInput多文件上传插件使用详解(包括Java代码)
Bootstrap FileInput多文件上传插件使用详解(包括Java代码)
转自 https://blog.csdn.net/qq_28550739/article/details/53436080
网上翻阅了很多教程，但是都不全面，经过一番研究之后终于成功上传了文件
一、需要引用的资源
因为该插件基于Bootstrap和jQuery，所以需要引入js和css文件，同时如果想要使插件语言变成中文，也要引入对应的语言文件，中文为zh.js
二、html代码部分
注意：有的教程在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: "",
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 fileName =new ArrayList();
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