<！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”）;
}
}