boostrap+fileinput上传图片至后台并预览图片

最近写项目，写上传封面图片，而自己写东西呢？css太难看，但是最后还是写了一个简单的增加删除图片，不过这次不介绍自己写的上传图片，今天介绍我对于这个boostrap的上传文件插件，感觉非常不好用！不好用，但是还是可以用。

HTML代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/fileinput.min.css">
<link rel="stylesheet" href="../css/backstage.css">
<link href="https://cdnjs.loli.net/ajax/libs/layer/2.3/skin/layer.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 基于Bootstrap的多图片（文件也可以）上传、预览、删除、缩放、进度...显示 -->
<script src="../js/fileinput.min.js"></script>
<script src="../js/zh.js " charset="UTF-8"></script>
<script src="https://cdnjs.loli.net/ajax/libs/layer/2.3/layer.js"></script>
<script type="text/javascript" src="../js/backstage2.js"></script>


<div class="form-group" id="upload">
	<input id="myFile" name="myFile" type="file" multiple>
</div>
<input type="submit" value="提交" id="button" class="btn btn-primary">

点击选择只是相当于缓存在本地浏览器，并没有上传到服务器。

而当点击提交就真正上传文件。

下面解释一下插件。

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:[ '<img src='/hotelSystem\files/' class='file-preview-image' alt='Desert' title='Desert'>',],预览图片
			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: "<i class='glyphicon glyphicon-king'></i>",
			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('<span id="parallelogram">设为封面</span>');
			});
		    $(".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('<span class="heart"></span>');
		    	}
		    	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<arr.length;i++){
				if(arr[i]==title){
					formData.append('fileimage',arr[i]);
				}
			}
		}else{
			var arr=filename.split(",");
			arr.reverse();
			formData.append('fileimage',arr[0]);
		}
		//将前台取到的值全部发送给后台
		if(file.length>=2){
			for(var j=0;j<parseInt(picture_size);j++){
				formData.append('file',file[parseInt(j)]);
			}
		}else{
			for(var j=0;j<parseInt(picture_size);j++){
				formData.append('file', $("#myFile")[0].files[parseInt(j)]);  //添加图片信息的参数
			}
		}
		//formData.append('text1',$("input[name='text1'").val());//添加表单参数
		formData.append('filename',filename);
		$.ajax({ 
			url: '/hotelSystem/rooms/addRoom', 
			type: 'POST', 
			data: formData, 
			async: true, 
			cache: false, //禁止缓存
			contentType: false, 
			processData: false, 
			success: function (XMLHttpRequest) { 
				//通过回调函数重定向
				if(XMLHttpRequest=="add"){
					layer.msg("添加成功！");
					setTimeout(function () { 
						 window.location.href="http://localhost:8080/hotelSystem/admin/backstage3.jsp?";
					 }, 1000);
				}else if(XMLHttpRequest=="no"){
					$("#denglu").hide();
					layer.msg("添加失败！");
					 setTimeout(function () { 
					        window.location.href="http://localhost:8080/hotelSystem/admin/backstage3.jsp";
					 }, 1000);
				}
				console.log(XMLHttpRequest);
			}, 
			error: function (returndata) { 
				layer.msg("未知错误！");
			} 
		}); 
} 

#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<Object> upload(HttpServletRequest request) throws ServletException, IOException {
		DiskFileItemFactory diskFactory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(diskFactory);
		List<FileItem> fileItems = null;
		List<Object> list=new ArrayList<>();
		upload.setHeaderEncoding("UTF-8");
		try {
			fileItems = upload.parseRequest(request);
		} catch (FileUploadException e1) {
			e1.printStackTrace();
		}
		Iterator<FileItem> iter = fileItems.iterator();
		while (iter.hasNext()) {
			FileItem item = (FileItem) iter.next();
			if (item.isFormField()) {
				String name = item.getFieldName(); // 获取name属性的值
				String value = item.getString("UTF-8"); // 获取value属性的值
				String decodeStr = URLDecoder.decode(value, "utf-8"); 
				list.add(decodeStr);
			} else {
				// 处理文件
				String fieldName = item.getFieldName(); // 文件域中name属性的值
				String fileName = item.getName(); // 文件的全路径，绝对路径名加文件名
				String contentType = item.getContentType(); // 文件的类型
				long size = item.getSize(); // 文件的大小，以字节为单位
				if(size!=0) {
					String rowpath = request.getServletContext().getRealPath("/");
					// 获取当前时间
					String xdPath = "images/";
					String path = rowpath + xdPath;
					File pathDir = new File(path); // 定义一个file指向一个具体的文件
					if (!pathDir.exists()) {
						pathDir.mkdirs();
					}
					File storeFile = new File(path+fileName);
					list.add(path+fileName);
					try {
						// 保存文件到硬盘
						item.write(storeFile);// 把上传的内容写到一个文件中
					} catch (Exception e) {
						e.printStackTrace();
					}
				}
				//删除缓存文件
				item.delete();
			}
		}
		return list;
	}
}