bootstrap fileinput 完整例子（有后台java版）
这个插件主页地址是：http://plugins.krajee.com/file-input/demo，
GitHub地址：https://github.com/kartik-v/bootstrap-fileinput
引入js:
<script src="${basePath }${pageContext.request.contextPath}/plugin/fileinput/js/fileinput.js">script>
<script src="${basePath }${pageContext.request.contextPath}/plugin/fileinput/js/locales/zh.js">script>引入css:
"stylesheet" href="${basePath }${pageContext.request.contextPath}/plugin/fileinput/css/fileinput.css" type="text/css" />假设要提交表单和上传图片一起
//后台的接受名为file,要相同名字，id为初始化文件框
"file-pic" name="file" type="file" multiple>
在页面初始化一个inputFile，不要写成这样的$('#file-pic').fileinput('refresh',{..}),上传多张图的话，后面的图片会把前面的刷新掉，只上传最后一张图
$('#file-pic').fileinput({//初始化上传文件框
showUpload : false,
showRemove : false,
uploadAsync: true,
uploadLabel: "上传",//设置上传按钮的汉字
uploadClass: "btn btn-primary",//设置上传按钮样式
showCaption: false,//是否显示标题
language: "zh",//配置语言
uploadUrl: "BannerPicAction!addPicture.action",
maxFileSize : 0,
maxFileCount: 1,/*允许最大上传数，可以多个，当前设置单个*/
enctype: 'multipart/form-data',
//allowedPreviewTypes : [ 'image' ], //allowedFileTypes: ['image', 'video', 'flash'],
allowedFileExtensions : ["jpg", "png","gif"],/*上传文件格式*/
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
dropZoneTitle: "请通过拖拽图片文件放到这里",
dropZoneClickTitle: "或者点击此区域添加图片",
//uploadExtraData: {"id": id},//这个是外带数据
showBrowse: false,
browseOnZoneClick: true,
slugCallback : function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
//上传文件成功，回调函数
$('#file-pic').on("fileuploaded", function(event, data, previewId, index) {
var result = data.response; //后台返回的json
//console.log(result.status);
//console.log(result.id);
$('#picid').val(result.id);//拿到后台传回来的id，给图片的id赋值序列化表单用
//如果是上传多张图
/*
//计数标记，用于确保全部图片都上传成功了，再提交表单信息
var fileCount = $('#file-pic').fileinput('getFilesCount');
if(fileCount==1){
$.ajax({//上传文件成功后再保存图片信息
url:'BannerPicAction!savaForm.action',
data:$('#form1').serialize(),//form表单的值
success:function(data,status){
...
},
cache:false, //不缓存
});
}
*/
$.ajax({//上传文件成功后再保存图片信息
url:'BannerPicAction!savaForm.action',
type:'post',
dataType:'json',
data:$('#form1').serialize(),//form表单的值
success:function(data,status){
if (status == "success") {
if(data.status == "success"){//提交成功
//跳转回添加页面
}else{
alert("添加失败,编码的错误!");
}
} else {
alert("添加失败,ajax请求返回失败!");
}
},
cache:false, //不缓存
});
});
$('#savePic').on('click',function (){// 提交图片信息 //
//先上传文件，然后在回调函数提交表单
$('#file-pic').fileinput('upload');
}); 后台代码部分：
@Action(value = "BannerPicAction")
@Scope("prototype")
@Results(value = {
@Result(name=""),
})
public class BannerPicAction extends BaseAction{
private File file; //文件
private String fileFileName; //文件名
private String fileContentType; //文件类型
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
省略getset方法
/**
* 接受表单的
* @return
* @throws Exception
*/
public String savaForm() throws Exception{
省略
return null;
}
/**
* 图片上传(可多个)
* @return
* @throws Exception
*/
public String addPicture() throws Exception{
//保存图片的文件夹路径(tomcat的项目目录下的-->shop/uploadfile)
String path = ServletActionContext.getServletContext().getRealPath("/");
File tempfile = new File(path); // 如果文件夹不存在创建
if (!tempfile.exists()) {
tempfile.mkdir();
}
System.out.println(path);
PrintWriter out = null;
//结果集
final Map result = new HashMap();
result.put("status", "success");
try{
List list = new ArrayList();//list里返回图片路径和缩略图路径
if(file != null && fileFileName != null){//判断是否有文件
UploadImgUtils.upload(file, fileFileName, path);//上传文件的类，
}
//首先保存图片地址（然后再有savaForm.action保存图片）
BannerPic pic = bannerPicService.save(bannerPic);
result.put("id",pic.getId());//返回图片信息ID，给图片上传更新用
}
out = this.response.getWriter();
response.setContentType("application/json");
}catch(Exception e){
e.printStackTrace();
result.put("status", "error");
out.write(GsonUtils.GSON.toJson(result));
log.error(e.getMessage(), e);
}finally{
out.write(GsonUtils.GSON.toJson(result));
out.close();
}
return null;
}
}
也给出上传文件代码:
public static List<PicVO> upload(File file , String fileName ,String savaPath ) throws IOException{
SimpleDateFormat formatDate = new SimpleDateFormat("yyyy-MM-dd");
String dateNow = formatDate.format(new Date());
///uploadfile/以日期为文件夹名,保存进数据库的相对路径
String relativePath = "\\uploadfile\\"+dateNow;
String uploadfilePath = savaPath+"\\uploadfile"; //uploadfile文件夹
//(tomcat目录下的绝对路径-->shop/uploadFile/以日期为文件夹名)
String path = savaPath+relativePath;
System.out.println(path);
//保存进数据库的相对路径
//String relativePath = savaPath.substring(savaPath.lastIndexOf("shop"))+"\\"+dateNow;
File uploadfile = new File(uploadfilePath);
//判断文件夹是否存在,如果不存在则创建文件夹
if (!uploadfile.exists()) {//先创建uploadfile文件夹
uploadfile.mkdir();
}
File tempfile = new File(path); //判断文件夹是否存在,如果不存在则创建文件夹
if (!tempfile.exists()) {//然后创建以日期为文件夹名的文件夹
tempfile.mkdir();
}
List<PicVO> list = new ArrayList<PicVO>();//图片临时对象里面属性是（picUrl,ThumbPicUrl）
PicVO picVO = new PicVO(); //新建临时对象
// 采用时间+UUID的方式随即命名
String UUIDFileName = java.util.UUID.randomUUID().toString();
// 保存在tomcat中的文件名
String newFileName = UUIDFileName+ fileName.substring(fileName.lastIndexOf("."));
File tempFile=new File( path, newFileName);
//FileUtils.copyFile(file, tempFile);//保存文件
//File tempFile=new File(newFileName);
FileOutputStream fos = new FileOutputStream(tempFile);
InputStream input = new FileInputStream(file);
// 一次30kb
byte[] readBuff = new byte[1024 * 30];
int count = -1;
while ((count = input.read(readBuff, 0, readBuff.length)) != -1) {
fos.write(readBuff, 0, count);
}
fos.flush();
fos.close();
input.close();
list.add(picVO);
}
return list;
}