Bootstrap FileInput多文件上传插件使用详解(包括Java代码)
2016-12-02 16:25
1686 查看
网上翻阅了很多教程,但是都不全面,经过一番研究之后终于成功上传了文件
因为该插件基于Bootstrap和jQuery,所以需要引入js和css文件,同时如果想要使插件语言变成中文,也要引入对应的语言文件,中文为zh.js
注意:有的教程在input标签上加了class=”file”,这个class会导致插件一直是英文,即语言切换失效,解决方式很简单,把class=”file”去掉即可。
其中常用的基础参数、回调函数都有注释。
uploadImage()方法:(支持随机名称)
当前使用的是SpringMVC框架,该插件上传文件的后台代码与普通文件上传的代码相同。
showRemove:是否显示删除/清空按钮。默认值true。
showUpload:是否显示文件上传按钮。默认是submit按钮,除非指定了uploadUrl属性。默认值true。
showCancel:是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true。
captionClass:在标题容器上额外的class。类型string。
previewClass:在预览区域容器上的额外的class。类型string。
mainClass:添加在文件上传主容器。类型string。
initialDelimiter:在initialPreview属性中用于上传多个文件时的分隔符。默认值:’$$‘。
initialPreview:类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串,会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组,初始化预览图中会显示数组中所有的文件。
一、需要引用的资源
<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文件上传预览插件使用详解
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- Bootstrap-fileinput插件使用教程 支持多文件上传
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- bootstrap文件上传插件fileinput使用
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- Bootstrap fileinput文件上传组件使用详解
- BootStrap Fileinput上传插件使用实例代码
- 填坑——使用bootstrap-fileinput插件上传文件成功后,回调函数不起作用
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- 使用插件Bootstrap Fileinput文件上传
- 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
- Bootstrap文件上传插件File Input的使用
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- Bootstrap文件上传插件File Input的使用
- Bootstrap文件上传插件File Input的使用
- Bootstrap文件(图片)上传插件File Input进阶使用说明
- Bootstrap -- 文件上传插件File Input的使用
- 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用