圖片回顯+圖片同時上傳
jsp頁面--start
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./bootstrap.css" rel="stylesheet" type="text/css">
<script src="./jQuery-2.js" type="text/javascript"></script>
<script src="./bootstrap.js" type="text/javascript"></script>
<title>Insert title here</title>
</head>
<body>
<form id="tdtfsh_97" enctype="multipart/form-data" name="modalForm" class="form-horizontal ng-pristine ng-valid ng-scope">
<!-- 上傳口 -->
<div class="file-upload">
<label class="col-sm-2 control-label">材料</label>
<span class="file-upload-text">上傳圖片</span>
<input name="files" id="file0" imgid="img0" class="file-upload-input" onchange="javascript:setImagePreviews()" type="file" accept="image/jpg,image/jpeg,image/png">
</div>
<!-- 隱藏域 -->
<div style="overflow: hidden;margin-left: 7%;">
<div id="img_div" style="float:left;left:5px;margin-top: 20px" class="ng-scope"></div>
</div>
</form>
</body>
</html>
jsp頁面--end
js--start
<script type="text/javascript">
//圖片回顯
var magId=0;
function setImagePreviews(){
var docobj=document.getElementById("file"+magId);
var dd=document.getElementById("img_div");
var fileList=docobj.files;
for( var i=0;i<fileList.length;i++){
magId++;
$(dd).append(
"<div class='fileUpload_preview' imgid='img"+(magId-1)+"' style='margin-top:5px;'>"+
"<li>"+
"<img id='img"+(magId-1)+"' name='"+(magId-1)+"' class='fileUpload_preview fileUpload_preview-small fileUpload_preview-square' src='"+this.result+"'>"+
"</li>"+
/* "<div class='btn btn-primary btn-download'>↓</div>"+ */
"<div id='close"+(magId-1)+"' class='btn btn-danger btn-close'>x</div>"+
"</div>"
);
$(".file-upload [imgid=img"+(magId-1)+"]")[0].style.position="absolute";
$(".file-upload [imgid=img"+(magId-1)+"]")[0].style.left="-10000px";
$(".file-upload").append('<input id="file'+magId+'" name="files" imgid="img'+magId+'" class="file-upload-input" onchange="javascript:setImagePreviews()" type="file" accept="image/jpg,image/jpeg,image/png">');
$("#close"+(magId-1)).on("click",function(e){
var id=$(this).parents(".fileUpload_preview").attr("imgid");
$(this).parent().remove();
//刪除input type=file
$(".file-upload input[imgid="+id+"]").remove();
});
var imgObjPreview=document.getElementById("img"+(magId-1));
if(docobj.files&&docobj.files[i]){
imgObjPreview.style.display="block";
imgObjPreview.style.width="100px";
imgObjPreview.style.height="120px";
imgObjPreview.src=window.URL.createObjectURL(docobj.files[i]);
}else{
//IE
docobj.select();
var imgsrc=document.selection.createRange().text;
var localImageId=document.getElementById("img"+(magId-1));
localImageId.style.width="100px";
localImageId.style.height="120px";
try{
localIamgeId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localIamgeId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgsrc;
}catch(e){
alert("上傳圖片出錯");
return false;
}
imgObjPreview.style.display="none";
document.selection.empty();
}
}
return true;
}
//提交表單
function erp_tdtfsh_97(){
var form = new FormData(document.getElementById("tdtfsh_97"));
$.ajax({
url:"${pageContext.request.contextPath}/erp/erp_tdtfsh_97.do",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
alert("提交成功!");
},
error:function(e){
alert("提交失敗！！");
}
});
}
</script>
js-end
後臺--start
@RequestMapping(value="erp/erp_tdtfsh_97.do")
public void erp_tdtfsh_97(@RequestParam MultipartFile[] files,HttpServletRequest request,HttpServletResponse response){
PageData pResult=new PageData();
JSONObject json_result=new JSONObject();//json資料
for(int i=0;i<files.length;i++){
int bn=i+1;
MultipartFile file=files[i];
int mFile = (int) files[i].getSize();
if(file.getSize()!=0){
Date date = new Date();
String filePath ="/kkimg/assess/upload/"+new SimpleDateFormat("yyyy/MM/dd/").format(date);
String imgpath="upload/"+new SimpleDateFormat("yyyy/MM/dd/").format(date);
String filename = files[i].getOriginalFilename();
String prefix=filename.substring(filename.lastIndexOf(".")+1);
UUID uuid = UUID.randomUUID();
String uuidname=uuid.toString().replaceAll("-","")+"."+prefix;
byte[] file36Byte = files[i].getBytes();
FileUtils.writeByteArrayToFile(new File(filePath+uuidname),file36Byte);
System.out.println("圖片路徑："+filePath+uuidname);
json_result.put("bcimg"+bn,imgpath+uuidname);
}
}
}
pResult.put("result_1_value",json_result.toString());
erp_fiveModelService.save(pResult);
後臺--end