Bootstrap fileinput(ssm版)
这是一篇我早起学习java-ssm的记录，这里主要是学习了文件上传
Bootstrap fileinput v1.0
前言
bootstrap fileinput是一个很好的文件上传插件。
但是官方不出api，这就尴尬了。
百度一下，每个人写法都不相同，好多代码本身都是错的。我修改后才能跑起来。
综上所述：所以今天我摸索了一天，把今天能够跑的起来的程序核心代码贴上。
完整demo在文章末尾github地址上
基于本人习惯：所用前端控件均为2017年最新的。
最后再唠叨一句：bootstrap不支持IE8极其以下的。没必要与IE较真，毕竟微软人家自己的win10都抛弃ie了。我们又何苦抓着不放呢
功能说明
这个版本的功能比较单一，图片不能提前上传，只能与表单一起提交。也不支持多图上传，适合单张图片上传需求。多张的话，请看我写的另外两篇博客
核心代码
因为是ssm项目，所以dao层和pojo是逆向工程生成的，service层和controller层基本一样，所以这3层的代码我就不贴出来，仅仅贴出核心代码的controller和jsp
ArticleController.java
package com.isd.controller; import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView; import com.isd.pojo.Article;
import com.isd.service.ArticleService; @Controller
public class ArticleController {
//用于检测图片是否上传成功
public void checkUpIsOk(int i,HttpServletResponse response) throws IOException{
response.setHeader("content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();//获取PrintWriter输出流
if(i==0){
out.write("插入失败");
out.write("<script>setTimeout(function(){"+
"history.go(-1);"+
"},500) </script>");
out.close();
}else{
out.write("插入成功");
out.write("<script>setTimeout(function(){"+
"location.href='goList'"+
"},500) </script>");
out.close();
}
} //新增文章保存
@Autowired
private ArticleService articleService;
@RequestMapping("addArticle")
public void addArticle(HttpSession session,HttpServletResponse response,Article record,MultipartFile image) throws IllegalStateException, IOException {
//原始名称
String oldFilename = image.getOriginalFilename();
//上传图片
boolean b=image!=null && oldFilename!=null && oldFilename.length()>0;
//存储图片的物理路径
String pic_path = session.getServletContext().getRealPath("WEB-INF/static/upload");
if(b){
//新的图片名称
String newFileName = UUID.randomUUID() + oldFilename.substring(oldFilename.lastIndexOf("."));
//新图片
File newFile = new File(pic_path+"/"+newFileName);
//将内存中的数据写入磁盘
image.transferTo(newFile);
//将新图片名称写到book中
record.setUrl(newFileName);
//新增的这条记录插入数据库
int i=articleService.insert(record);
checkUpIsOk(i,response);
}else{
record.setUrl("default.png");
int i=articleService.insert(record);
checkUpIsOk(i,response);
}
} //文章列表跳转
@RequestMapping("goList")
public ModelAndView goList(){
List<Article> artall=articleService.selectAll();
System.out.println(artall.size());
ModelAndView mv=new ModelAndView();
mv.addObject("artall",artall);
mv.setViewName("list");
return mv;
} //新增文章跳转
@RequestMapping("goAdd")
public String goAdd(){
return "add";
} }
add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<!-- jq -->
<script type="text/javascript" src="<%=basePath%>static/plugs/jquery-3.1.1.min.js"></script> <!-- bootstrap -->
<link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js"></script> <!-- 图片上传即使预览插件 -->
<link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css">
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script>
<style>
.container{padding-top:60px}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form class="form-horizontal" role="form" method="post" action="<%=basePath%>addArticle" enctype="multipart/form-data" >
<div class="form-group">
<label class="col-sm-2 control-label">描述</label>
<div class="col-sm-10">
<input type="text" name="describ" class="col-sm-10 form-control" placeholder="请描述">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">缩略图</label>
<div class="col-sm-10">
<input type="file" name="image" class="col-sm-10 myfile" value=""/>
</div>
</div>
<button type="submit" class="btn btn-default col-sm-2 col-sm-offset-4">提交</button>
</form>
</div>
</div>
</div> <script>
$(".myfile").fileinput({
showUpload: false, //是否显示上传按钮,跟随文本框的那个
showRemove : false, //显示移除按钮,跟随文本框的那个
allowedFileTypes: ['image'],//配置允许文件上传的类型
allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
language : 'zh'
})
</script>
</body>
</html>
list.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<!-- jq -->
<script type="text/javascript" src="${basePath}static/plugs/jquery-3.1.1.min.js"></script> <!-- bootstrap -->
<link rel="stylesheet" href="${basePath}static/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="${basePath}static/plugs/bootstrap/js/bootstrap.min.js"></script> <!-- 图片上传即使预览插件 -->
<link rel="stylesheet" href="${basePath}static/plugs/bootstrap-fileinput/css/fileinput.min.css">
<script type="text/javascript" src="${basePath}static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script>
<style>
.container{padding-top:60px}
.pic{width:100px;}
td {vertical-align: middle!important;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<button class="btn btn-default col-sm-2 pull-right add">新增</button>
<table class="table table-striped table-bordered">
<caption>文章列表</caption>
<thead>
<tr>
<th>id</th>
<th>描述</th>
<th>缩率图</th>
</tr>
</thead>
<tbody>
<c:forEach var="item" items="${artall}">
<tr>
<td>${item.id}</td>
<td>${item.describ}</td>
<td>
<img src="${basePath}static/upload/${item.url}" class="pic"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<script>
$(".add").click(function(){
location.href="${basePath}goAdd";
})
</script>
</body>
</html>
数据库设计
Bootstrap fileinput v2.0
前言
bootstrap fileinput是一个很好的文件上传插件。
但是官方不出api，这就尴尬了。
百度一下，每个人写法都不相同，好多代码本身都是错的。我修改后才能跑起来。
综上所述：所以今天我摸索了一天，把今天能够跑的起来的程序核心代码贴上。
完整demo在文章末尾github地址上
基于本人习惯：所用前端控件均为2017年最新的。
最后再唠叨一句：bootstrap不支持IE8极其以下的。没必要与IE较真，毕竟微软人家自己的win10都抛弃ie了。我们又何苦抓着不放呢
功能说明
点击上传ico，图片就会发出请求，请求后台上传图片的控制器，文件被写入服务器后。会把写入的文件名和路径返回给前端。
前端再埋入隐藏于
点击提交时，与其它信息一并入库
核心代码
因为是ssm项目，所以dao层和pojo是逆向工程生成的，service层和controller层基本一样，所以这3层的代码我就不贴出来，仅仅贴出核心代码的controller和jsp
ArticleController.java
package com.isd.controller; import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView; import com.isd.pojo.Article;
import com.isd.service.ArticleService; @Controller
public class ArticleController {
@Autowired
private ArticleService articleService; //新增文章页面跳转
@RequestMapping("goAdd")
public String goAdd(){
return "add";
}
//uploadFile
@ResponseBody
@RequestMapping("uploadFile")
public Map<String,Object> uploadFile(HttpSession session,MultipartFile myfile) throws IllegalStateException, IOException{
//原始名称
String oldFileName = myfile.getOriginalFilename(); //获取上传文件的原名
//存储图片的物理路径
String file_path = session.getServletContext().getRealPath("WEB-INF/static/upload");
//上传图片
if(myfile!=null && oldFileName!=null && oldFileName.length()>0){
//新的图片名称
String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
//新图片
File newFile = new File(file_path+"/"+newFileName);
//将内存中的数据写入磁盘
myfile.transferTo(newFile);
//将新图片名称返回到前端
Map<String,Object> map=new HashMap<String,Object>();
map.put("success", "成功啦");
map.put("url",newFileName);
return map;
}else{
Map<String,Object> map=new HashMap<String,Object>();
map.put("error","图片不合法");
return map;
}
} //新增文章保存
@RequestMapping("addArticle")
public void addArticle(HttpSession session,HttpServletResponse response,Article record,MultipartFile image) throws IllegalStateException, IOException {
//如果不传图片，那么则用默认的图片
if(record.getUrl()==null||record.getUrl().equals("")){
record.setUrl("default.png");
}
int i=articleService.insert(record);
checkUpIsOk(i,response);
} //用于判断插入是否成功
public void checkUpIsOk(int i,HttpServletResponse response) throws IOException{
response.setHeader("content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();//获取PrintWriter输出流
if(i==0){
out.write("插入失败");
out.write("<script>setTimeout(function(){"+
"history.go(-1);"+
"},500) </script>");
out.close();
}else{
out.write("插入成功");
out.write("<script>setTimeout(function(){"+
"location.href='goList'"+
"},500) </script>");
out.close();
}
} //文章列表页面跳转
@RequestMapping("goList")
public ModelAndView goList(){
List<Article> artall=articleService.selectAll();
System.out.println(artall.size());
ModelAndView mv=new ModelAndView();
mv.addObject("artall",artall);
mv.setViewName("list");
return mv;
}
}
add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<!-- jq -->
<script type="text/javascript" src="<%=basePath%>static/plugs/jquery-3.1.1.min.js"></script> <!-- bootstrap -->
<link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js"></script> <!-- 图片上传即使预览插件 -->
<link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css">
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script> <style>
.container{padding-top:60px}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form class="form-horizontal" role="form" method="post" action="<%=basePath%>addArticle" enctype="multipart/form-data" >
<div class="form-group">
<label class="col-sm-2 control-label">描述</label>
<div class="col-sm-10">
<input type="text" name="describ" class="col-sm-10 form-control" placeholder="请描述">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">缩略图</label>
<div class="col-sm-10">
<input type="file" name="myfile" class="col-sm-10 myfile" value=""/>
<input type="hidden" name="url" value="">
</div>
</div>
<button type="submit" class="btn btn-default col-sm-2 col-sm-offset-4">提交</button>
</form>
</div>
</div>
</div> <script>
$(".myfile").fileinput({
uploadUrl:"<%=basePath%>uploadFile",//上传的地址
uploadAsync:true, //默认异步上传
showUpload: false, //是否显示上传按钮,跟随文本框的那个
showRemove : false, //显示移除按钮,跟随文本框的那个
showCaption: true,//是否显示标题,就是那个文本框
showPreview : true, //是否显示预览,不写默认为true
dropZoneEnabled: false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 1, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
allowedFileTypes: ['image'],//配置允许文件上传的类型
allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
language : 'zh'
})
//异步上传返回结果处理
$('.myfile').on('fileerror', function(event, data, msg) {
console.log("fileerror");
console.log(data);
});
//异步上传返回结果处理
$(".myfile").on("fileuploaded", function (event, data, previewId, index) {
console.log("fileuploaded");
$("input[name='url']").val(data.response.url); }); //同步上传错误处理
$('.myfile').on('filebatchuploaderror', function(event, data, msg) {
console.log("filebatchuploaderror");
console.log(data);
}); //同步上传返回结果处理
$(".myfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
console.log("filebatchuploadsuccess");
console.log(data);
}); //上传前
$('.myfile').on('filepreupload', function(event, data, previewId, index) {
console.log("filepreupload");
});
</script>
</body>
</html>
list.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<!-- jq -->
<script type="text/javascript" src="${basePath}static/plugs/jquery-3.1.1.min.js"></script> <!-- bootstrap -->
<link rel="stylesheet" href="${basePath}static/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="${basePath}static/plugs/bootstrap/js/bootstrap.min.js"></script> <!-- 图片上传即使预览插件 -->
<link rel="stylesheet" href="${basePath}static/plugs/bootstrap-fileinput/css/fileinput.min.css">
<script type="text/javascript" src="${basePath}static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script> <style>
.container{padding-top:60px}
.pic{width:100px;}
td {vertical-align: middle!important;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<button class="btn btn-default col-sm-2 pull-right add">新增</button>
<table class="table table-striped table-bordered">
<caption>文章列表</caption>
<thead>
<tr>
<th>id</th>
<th>描述</th>
<th>缩率图</th>
</tr>
</thead>
<tbody>
<c:forEach var="item" items="${artall}">
<tr>
<td>${item.id}</td>
<td>${item.describ}</td>
<td>
<img src="${basePath}static/upload/${item.url}" class="pic"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<script>
$(".add").click(function(){
location.href="${basePath}goAdd";
})
</script>
</body>
</html>
数据库设计
Bootstrap fileinput v3.0
说明
在上一个版本即Bootstrap fileinput v2.0（ssm版）的基础上，增加了多处都需要上传的需求
核心代码
ArticleController.java
package com.isd.controller; import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView; import com.isd.pojo.Article;
import com.isd.service.ArticleService; @Controller
public class ArticleController {
//新增文章保存
@Autowired
private ArticleService articleService; //用于插入是否成功
public void checkUpIsOk(int i,HttpServletResponse response) throws IOException{
response.setHeader("content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();//获取PrintWriter输出流
if(i==0){
out.write("插入失败");
out.write("<script>setTimeout(function(){"+
"history.go(-1);"+
"},500) </script>");
out.close();
}else{
out.write("插入成功");
out.write("<script>setTimeout(function(){"+
"location.href='goList'"+
"},500) </script>");
out.close();
}
} //新增文章保存
@RequestMapping("addArticle")
public void addArticle(HttpSession session,HttpServletResponse response,Article record,MultipartFile image) throws IllegalStateException, IOException {
//如果不传图片，那么则用默认的图片
if(record.getUrl()==null||record.getUrl().equals("")){
record.setUrl("default.png");
}
if(record.getUrl2()==null||record.getUrl2().equals("")){
record.setUrl2("default.png");
}
int i=articleService.insert(record);
checkUpIsOk(i,response);
} //文章列表跳转
@RequestMapping("goList")
public ModelAndView goList(){
List<Article> artall=articleService.selectAll();
System.out.println(artall.size());
ModelAndView mv=new ModelAndView();
mv.addObject("artall",artall);
mv.setViewName("list");
return mv;
} //新增文章跳转
@RequestMapping("goAdd")
public String goAdd(){
return "add";
} //uploadFile
@ResponseBody
@RequestMapping("uploadFile")
public Map<String,Object> uploadFile(HttpSession session,MultipartFile myfile) throws IllegalStateException, IOException{
//原始名称
String oldFileName = myfile.getOriginalFilename(); //获取上传文件的原名
//存储图片的物理路径
String file_path = session.getServletContext().getRealPath("WEB-INF/static/upload"); //上传图片
if(myfile!=null && oldFileName!=null && oldFileName.length()>0){
//新的图片名称
String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
//新图片
File newFile = new File(file_path+"/"+newFileName);
//将内存中的数据写入磁盘
myfile.transferTo(newFile);
//将新图片名称返回到前端
Map<String,Object> map=new HashMap<String,Object>();
map.put("success", "成功啦");
map.put("url",newFileName);
return map;
}else{
Map<String,Object> map=new HashMap<String,Object>();
map.put("error","图片不合法");
return map;
}
}
}
add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<!-- jq -->
<script type="text/javascript" src="<%=basePath%>static/plugs/jquery-3.1.1.min.js"></script> <!-- bootstrap -->
<link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js"></script> <!-- 图片上传即使预览插件 -->
<link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css">
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script> <style>
.container{padding-top:60px}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form class="form-horizontal" role="form" method="post" action="<%=basePath%>addArticle" enctype="multipart/form-data" >
<div class="form-group">
<label class="col-sm-2 control-label">描述</label>
<div class="col-sm-10">
<input type="text" name="describ" class="col-sm-10 form-control" placeholder="请描述">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">缩略图</label>
<div class="col-sm-10">
<input type="file" name="myfile" data-ref="url" class="col-sm-10 myfile" value=""/>
<input type="hidden" name="url" value="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">封面</label>
<div class="col-sm-10">
<input type="file" name="myfile" data-ref="url2" class="col-sm-10 myfile" value=""/>
<input type="hidden" name="url2" value="">
</div>
</div>
<button type="submit" class="btn btn-default col-sm-2 col-sm-offset-4">提交</button>
</form>
</div>
</div>
</div> <script>
$(".myfile").fileinput({
uploadUrl:"<%=basePath%>uploadFile",//上传的地址
uploadAsync:true, //默认异步上传
showUpload: false, //是否显示上传按钮,跟随文本框的那个
showRemove : false, //显示移除按钮,跟随文本框的那个
showCaption: true,//是否显示标题,就是那个文本框
showPreview : true, //是否显示预览,不写默认为true
dropZoneEnabled: false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 1, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
allowedFileTypes: ['image'],//配置允许文件上传的类型
allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
language : 'zh'
})
//异步上传返回结果处理
$('.myfile').on('fileerror', function(event, data, msg) {
console.log("fileerror");
console.log(data);
});
//异步上传返回结果处理
$(".myfile").on("fileuploaded", function (event, data, previewId, index) {
console.log("fileuploaded");
var ref=$(this).attr("data-ref");
$("input[name='"+ref+"']").val(data.response.url); }); //同步上传错误处理
$('.myfile').on('filebatchuploaderror', function(event, data, msg) {
console.log("filebatchuploaderror");
console.log(data);
}); //同步上传返回结果处理
$(".myfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
console.log("filebatchuploadsuccess");
console.log(data);
}); //上传前
$('.myfile').on('filepreupload', function(event, data, previewId, index) {
console.log("filepreupload");
});
</script>
</body>
</html>
数据库设计
Bootstrap fileinput(ssm版)的更多相关文章
- Bootstrap fileinput v3.0（ssm版）
说明在上一个版本即Bootstrap fileinput v2.0(ssm版)的基础上,增加了多处都需要上传的需求 核心代码ArticleController.java package com.isd ...
- Bootstrap fileinput v2.0（ssm版）
前言bootstrap fileinput是一个很好的文件上传插件.但是官方不出api,这就尴尬了.百度一下,每个人写法都不相同,好多代码本身都是错的.我修改后才能跑起来.综上所述:所以今天我摸索了一 ...
- Bootstrap fileinput v1.0（ssm版）
前言bootstrap fileinput是一个很好的文件上传插件.但是官方不出api,这就尴尬了.百度一下,每个人写法都不相同,好多代码本身都是错的.我修改后才能跑起来.综上所述:所以今天我摸索了一 ...
- 模仿天猫实战【SSM版】——后台开发
上一篇文章链接:模仿天猫实战[SSM版]--项目起步 后台需求分析 在开始码代码之前,还是需要先清楚自己要做什么事情,后台具体需要实现哪些功能: 注意: 订单.用户.订单.推荐链接均不提供增删的功能. ...
- JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- bootstrap 2.3版与3.0版的使用区别
bootstrap 2.3版与3.0版的使用区别 bootstrap已经推出了3.0的新版,看起来2.3.x版本也不会再更新了.那么bootstrap 2.3版与3.0版的区别在哪里呢?下面我们就来介 ...
- bootstrap fileinput添加上传成功回调事件
国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...
- 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
- bootstrap fileinput 使用记录
第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...
- 关于Bootstrap fileinput 上传新文件，移除时触发服务器同步删除的配置
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...
随机推荐
- C# 线程（一）——基础概念（线程与进程、前后台线程）
一.基础概念 1.1线程与进程 线程--是一个可执行路径,它可以独立于其他线程执行. 进程--每个线程都在操作系统的进程(Process)内执行,而操作系统则提供了程序运行的独立环境,它提供了一个应用 ...
- AdaBoost算法的原理及Python实现
一.概述 AdaBoost(Adaptive Boosting,自适应提升)是一种迭代式的集成学习算法,通过不断调整样本权重,提升弱学习器性能,最终集成为一个强学习器.它继承了 Boosting ...
- Spring基于xml的CRUD
目录 基于xml的CRUD 代码实现 测试 基于xml的CRUD 源码 使用C3P0连接池 使用dbutils包中的QueryRunner类来对数据库进行操作 代码实现 pom.xml <?xm ...
- 【经验】VScode 远程 SSH 连接 Ubuntu 或 TrueNas 出错，Could not establish connection
用VScode常常会碰到以下情况,Could not establish connection. 先介绍一下VScode远程连接和终端SSH连接的区别:终端直接用SSH连接时,只需要开启SSH服务,并 ...
- 异步之舞：Motor驱动与MongoDB的CRUD交响曲
title: 异步之舞:Motor驱动与MongoDB的CRUD交响曲 date: 2025/05/19 15:30:10 updated: 2025/05/19 15:30:10 author: c ...
- openjdk8下载地址（附赠）
openjdk下载地址:https://jdk.java.net/ (文末已经为大家下好了,放在网盘里) 进去后点8,win. 安装好后,使用java -version命令如下: 成功安装openjd ...
- k维背包
题目链接:E - Product Development (atcoder.jp) 因为最多为5,因此可以暴力枚举 int dp[10][10][10][10][10]; int a[110][10] ...
- 【公众号搬运】React-Native开发鸿蒙NEXT(4)
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...
- 面试题：java Runnable与Callable 的区别
相同点 都是接口:(废话,当然是接口了) 都可用来编写多线程程序: 都需要调用Thread.start()启动线程. Callable是类似于Runnable的接口,实现Callable接口的类和实现 ...
- Spring 注解之 @MapperScan 和 @Mapper
@Mapper注解 为了让别的类能够引用UserMapper,需要在UserMapper类上添加@Mapper注解: @Mapper public interface UserMapper { pub ...