<!DOCTYPE html>
<html lang =“zh-cn”>
<head>
<meta charset =“utf-8”>
<title>多图片上传</ title>
</ head>
<style>
#file-area input {
display:none;
}
</ style>
<body>
<div style =“display:none;” id =“file-list”> </ div>
<form id =“batchUploadFrom”method =“post”enctype =“multipart / form-data”>
<div id =“file-area”style =“margin-top: 5px;“>
<input data-id =”0“type =”file“name =”fileName“style =”margin-left:14px; margin-top:5px;“>
</ div>
<input type =”button “id =”select-file“value =”选择图片“style =”margin-left:14px; margin-top:5px;“/>
<input type =”button“id =”batchUpload“value =”批量上传图片“style =”margin-left:14px;margin-top:5px;"/>
</ form>
<script src =“$ {webRoot} /resource/js/jquery/jquery-1.8.3.min.js”> </ script>
<script type =“text / javascript”src =“$ {webRoot} / resource / js / jquery / jquery.from.js“> </ script>
<script type =”text / javascript“>
$(function(){
var count = 0;
$(“#batchUpload”)。click(function(){
$(“#batchUploadFrom”)。ajaxSubmit({
url:“$ {webRoot} /management/addBatchImage.do” ,
键入:“post”,
dataType:“json”,
processData:false,
contentType:false,
cache:false,
success:function(result){
if(result =='0'){
alert(“图片批量上传成功! “);
} else {
alert(”图片批量上传失败!“);
}
}
};
});
$(“#select-file”)。click(function(){
$(“#file-area”)。children()。last()。click();
});
$(“#file-area”)。on(“change”,“input”,function(){
var img = $(“#file-list img [data-id ='”+ $(this).data( “id”)+“']”);
if(img.length == 0)
{
img = $('<img data-id =“'+(count ++)+'”style =“margin-left:14px; margin-top:5px; width:106px; height:100px;“>');
$(”
$(“#file-list”)。append(“<i onclick ='deleteImg(”+ count +“)'data-id ='”+ count +“'> X </ i>”);
if(count == 1){
$(“#file-area”)。append('<input data-id =“'+ count +'”type =“file”name =“fileName”style =“margin-left: 10px的;边距:5px的;“>');
} else {
$(“#file-area”)。append('<input data-id =“'+ count +'”type =“file”name =“fileName”style =“margin-left:14px; margin-top :5px的;“>');
}
}
$(”
var imgSrc = document.selection.createRange()。text;
$(“#file-list img [data-id ='”+(count-1)+“']”)。attr('src',“$ {webRoot} /donor/IoReadImage.do?imgName =”+ IMGSRC);
})
});
function deleteImg(count){
$(“#file-list img [data-id ='”+(count-1)+“']”)。remove();
$(“#file-list i [data-id ='”+(count)+“']”)。remove();
$(“#file-area input [data-id ='”+(count-1)+“']”)。remove();
}
</ script>
</ body>
</ html>
//图片IO流读取
@RequestMapping(“/ IoReadImage”)
public String IoReadImage(String imgName,HttpServletRequest request,HttpServletResponse response)throws IOException {
ServletOutputStream out = null;
FileInputStream ips = null;
try {
//获取图片存放路径
// String imgPath = Constans.FOLDER_IMAGE + imgName;
// ips = new FileInputStream(new File(SAVEPATH +“/”+ imgName));
if(imgName!= null &&!“”。equals(imgName)){
String imgNames = new String(imgName.getBytes(“iso-8859-1”),“utf-8”);
ips = new FileInputStream(new File(imgNames));
response.setContentType(”
out = response.getOutputStream();
//读取文件流
int len = 0;
byte [] buffer = new byte [1024 * 10];
while((len = ips.read(buffer))!= -1){
out.write(buffer,0,len);
}
out.flush();
}
}catch (Exception e){
e.printStackTrace();
} finally {
if(out!= null){
out.close();
}
if(ips!= null){
ips.close();
}
}
return null;
}
//图片添加行为
@RequestMapping("/addBatchImage")
public ModelAndView addBatchImage(@RequestParam(value="fileName",required=false)MultipartFile[] fileName,String dataNo,HttpServletRequest request,HttpServletResponse response) {
try {
File filePath = new File("");
if(!filePath.exists()){
filePath.mkdirs();
}
if (fileName != null && fileName.length > 0) {
for (int i = 0; i < fileName.length; i++) {
MultipartFile files = fileName[i];
.....................
}
}
}
return ajaxJsonEscape("0");
} catch(Exception e){
e.printStackTrace();
return ajaxJsonEscape(“1”);
}
}