boostrap+fileinput上传图片至后台并预览图片
最近写项目，写上传封面图片，而自己写东西呢？css太难看，但是最后还是写了一个简单的增加删除图片，不过这次不介绍自己写的上传图片，今天介绍我对于这个boostrap的上传文件插件，感觉非常不好用！不好用，但是还是可以用。
HTML代码
点击选择只是相当于缓存在本地浏览器，并没有上传到服务器。
而当点击提交就真正上传文件。
下面解释一下插件。
fileinput插件可以做到预览图片，放大图片，删除图片，和多张图片上传。
下面是我对于这个插件的认识。
这个插件的自带上传URL，没有弄明白，看API也只是看到要以JSON格式，反正没用起。
可能对于这个会有部分问题，因为只是部分代码。
我直接跳过自带的URL，利用ajax技术上传文件。
fileinput其实简化了很多代码，使用也只是相当于设施属性，在最初的那个按钮上配置相应的设置，最后插件还带有很多方法，而我在这里使用了几个简单方法，当选中图片就使用这个方法filebatchselected，其中都是我对于图片的封面和多次点击图片的上传。
下面是我的弄了好久的问题
上传图片每次点击选择图片，每次只上传一张图片，导致出现每次上传只能上传到后台一个值，最后我将每次点击上传文件存放在一个对象中，才上传多个文件。
应该是这样选，才是最正常操作。
可是测试要每次点一张上传，然后一起上传。就造成了这个问题。
var picture_size;
var filedname;
var fileCount;
var i=0;
var file=new Array();
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件（第一次初始化）
oFile.Init = function (ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png','jpeg','bmp'],//接收的文件后缀
//showUploadedThumbs:false,
// uploadClass: 'hidden',
uploadLabel: "上传",//设置上传按钮的汉字
initialCaption: "请上传商家logo",//文本框初始话value
// initialPreview:[ '
',],预览图片
showUpload: false, //是否显示上传按钮
showCaption: true,//是否显示标题
browseClass: "btn btn-info", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
showRemove: false,//是否显示移除
//minImageWidth: 150, //图片的最小宽度
//minImageHeight: 150,//图片的最小高度
//maxImageWidth: 150,//图片的最大宽度
//maxImageHeight: 150,//图片的最大高度
maxFileSize: 2048*4,//单位为kb，如果为0表示不限制文件大小
maxFileCount: 5, //表示允许同时上传的最大文件个数
minFileCount: 0,
enctype: 'multipart/form-data',
validateInitialCount: true,//有效初始化计数
previewFileIcon: "",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
fileActionSettings : {
showUpload: false,//是否显示上传小图标
//owRemove: false//是否显示删除小图标
},
//将文件名中间的-替换成_ 回调函数
slugCallback : function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
//File对象--files
}).on("filebatchselected", function(event, files) {
//将选中的文件加入
//console.log("files:"+typeof(files[0]));
picture_size = files.length;
// fileCount = $('#myFile').fileinput('getFilesCount');
//对每个新的对象重新创建一个对象存放
if(picture_size>0){
file[parseInt(picture_size-1)]=$("#myFile")[0].files[0];
}
//将多个file放入list
//console.log("file:"+file.length);
//name ---value
console.log($('#myFile')[0].files[0]);
//console.log($('#myFile')[0].files);
// console.log("picture_size:"+picture_size);
//将上传的文件对象传给全局变量，用以处理为字符串
filedname=files;
$(".kv-file-content").mouseenter(function() {
$(this).find("img").css('opacity','0.5').show();
$(this).append('设为封面');
});
$(".kv-file-content").mouseleave(function() {
$(this).find("img").css('opacity','1');
$("#parallelogram").remove();
});
$(".kv-file-content").click(function() {
if(!$(".file-preview-thumbnails").hasClass(".heart")){
//删除其他的兄弟样式
$(".file-preview-thumbnails").find(".heart").remove();
$(this).append('');
}
return;
});
}).on("fileuploaded", function (event, data, previewId, index) {
//导入文件上传完成之后的事件
//对文件的删除事件
var datas = data.response;
}).fileinput("enable");//enable作用：destroy并重新初始化fileinput插件后，插件会处于disable状态
}
return oFile;
};
$(function () {
//0.初始化fileinput
var oFileInput = new FileInput();
//这里的后台连接被拦截，只用通过点击事件，才能跳转
oFileInput.Init("myFile", "/hotelSystem/rooms/addRoom");
$("#button").click(function(){
doUpload();
});
});
function doUpload() {
//图片验证
var formData = new FormData();
//判断有几个文件
var filename="";
//拼接字符串
for(i=parseInt(picture_size)-1;i>-1;i--){
filename+=filedname[i].name+",";
}
// console.log(picture_size-1);
//将最后的拼接符去掉
filename=filename.substring(0,filename.lastIndexOf(","));
//查找封面标记，如果没有，默认第一张
if($(".heart").length>0){
//将封面传给后台
var arr=filename.split(",");
//多次增加图片，是先进先出，所以必须调换顺序
arr.sort();
//获取选中的图片属性title
// console.log($(".heart").prev("img").attr("title"));
var title=$(".heart").prev("img").attr("title");
for(var i=0;i=2){
for(var j=0;j #parallelogram {
width: 30px;
height: 35px;
color:#fff;
font-size:12px;
background: #ff4510;
position: absolute;
top:0px;
right:0px;
}
.search{
width:200px;
text-align:center;
margin:0px auto;
position: absolute;
top: 50%;
margin-top: -16px;
margin-left: 40%;
}
.search span{
cursor: pointer;
}
.roomfont{
text-align: center;
bottom: 50px;
}
/**
心形
*/
.heart{
width:10px;
height:20px;
position:relative;
/* relative(相对定位) 对象不可层叠、不脱离文档流，
参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级 */
}
/* after 伪元素在元素之前添加内容*/
.heart:before{
content:" ";
border-radius:10px 10px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */
width:8px; height:12px;/* 长方形 */
background:#ff4510;
-moz-transform: rotate(-45deg);/* 逆时针旋转45°*/
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position:absolute;/* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */
left:60px;
bottom:2px;
}
/* after 伪元素在元素之后添加内容*/
.heart:after{
content:" ";
width:8px; height:12px;
background:#ff4510;
border-radius:10px 10px 0 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position:absolute;
left:64px;bottom:2px;
} 后台实现
import java.io.File;
import java.io.IOException;
import java.net.URLDecoder;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class UploadUtil {
public static List