js:jquery-form.js
jsp:
<form id="form_serviceFile" action="javascript(0);" method="post" enctype="multipart/form-data">
<div class="div-box div-panel" style="padding-left:8px;" id="imagesList1">
<div class="div-panel-title">内容</div>
<div class="div-item" style="width:340px;height:160px;">
<div style="width:140px;float:left;">
<p>文件1:</p>
<input value="${orderNo}" id="no_changService" hidden>
<input type="file" name="file_service0"/>
<input type="button" οnclick="delPic(10)" value="删除" style="width:60px;margin-top:8px;"/>
</div>
<img id="ser_imageId0" style="width:160px;height:160px;"/>
</div>
<div class="div-item" style="width:340px;height:160px;">
<div style="width:140px;float:left;">
<p>文件2:</p>
<input type="file" id="file_service1" name="file_service1"/>
<input type="button" οnclick="delPic(11)" value="删除" style="width:60px;margin-top:8px;"/>
</div>
<img id="ser_imageId1" style="width:160px;height:160px;"/>
</div>
<div class="div-item" style="width:340px;height:160px;">
<div style="width:140px;float:left;">
<p>文件3:</p>
<input type="file" name="file_service2"/>
<input type="button" οnclick="delPic(12)" value="删除" style="width:60px;margin-top:8px;"/>
</div>
<img id="ser_imageId2" style="width:160px;height:160px;"/>
</div>
<div class="div-item" style="width:340px;height:160px;">
<div style="width:140px;float:left;">
<p>文件4:</p>
<input type="file" name="file_service3"/>
<input type="button" οnclick="delPic(13)" value="删除" style="width:60px;margin-top:8px;"/>
</div>
<img id="ser_imageId3" style="width:160px;height:160px;"/>
</div>
<div class="div-item" style="width:340px;height:160px;">
<div style="width:140px;float:left;">
<p>文件5:</p>
<input type="file" name="file_service4"/>
<input type="button" οnclick="delPic(14)" value="删除" style="width:60px;margin-top:8px;"/>
</div>
<img id="ser_imageId4" style="width:160px;height:160px;"/>
</div>
<div class="div-item" style="width:340px;height:160px;">
<div style="width:140px;float:left;">
<p>文件:</p><span id="serFile"></span>
</div>
</div>
<div style="clear:both;"></div>
<div><input type="button" οnclick="updateFile(1)" value="上传" style="width:120px;"/></div>
</div>
</form>
javascript:上传的数据是一个list,里面包含form里面的五个file,以及每个file的新旧地址(旧地址为 img的src 新地址为 file的路径)
el添加就图片的地址
$("#ser_imageId0").attr("src","${serviceFile0}");
$("#ser_imageId1").attr("src","${serviceFile1}");
$("#ser_imageId2").attr("src","${serviceFile2}");
$("#ser_imageId3").attr("src","${serviceFile3}");
$("#ser_imageId4").attr("src","${serviceFile4}");
替换时执行方法:
function updateFile(obj){
var updateType;
var imgList;
if(obj==1){updateType=1;imgList = $("#imagesList1").find(".div-item");}
if(obj==2){updateType=2;imgList = $("#imagesList2").find(".div-item");}
if(obj==3){updateType=3;imgList = $("#imagesList3").find(".div-item");}
var dataList = new Array();
for(var i = 0; i < imgList.length; i++){
var newdata = $($(imgList).find(":file")[i]).val();
var olddata = $($(imgList).find("img")[i]).attr("src");
dataList.push({"oldimg":olddata,"newimg":newdata});
}
var dataChangServiceNo = $("#no_changService").val();
var jsonData = JSON.stringify(dataList);
if(obj==1){
$("#form_serviceFile").ajaxSubmit({
type:'post',
url:'<%=basePath %>uploadFile/updateFileDefService.do',
dataType:"json",
data:{imgList:jsonData,data_no:dataChangServiceNo,changeFileType:updateType},
success:function(data){
if(data.type=1){
openNewDig(dataChangServiceNo);
}
}
});
}
}
controller:
@ResponseBody
@RequestMapping(value="/uploadFile/updateFileDefService.do",method=RequestMethod.POST)
public ControllerBean updateFile(HttpServletRequest req,String imgList,String data_no,String changeFileType){
String imgPath="";
String newPath="";
ControllerBean retValue = new ControllerBean(ControllerBean.TYPE_ERROR,"上传失败!");
//取得数据库里的路径
List<PqsNoticeHead> infoByNono = pqsNoticeHeadService.getInfoByNono(data_no);
for (PqsNoticeHead pnh : infoByNono){
if("1".equals(changeFileType)){imgPath=pnh.getServiceFile();}
if("2".equals(changeFileType)){imgPath=pnh.getWpmEngineFile();}
if("3".equals(changeFileType)){imgPath=pnh.getDefPhoto();}
}
String realPath = req.getServletContext().getRealPath("upload");
File f = new File(realPath);
if(!f.exists()){
f.mkdir();
}
CommonsMultipartResolver resolver= new CommonsMultipartResolver(req.getServletContext());
if(resolver.isMultipart(req)){
MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest)req;
Iterator<String> fileNames = multipartRequest.getFileNames();
while(fileNames.hasNext()) {
MultipartFile file = multipartRequest.getFile(fileNames.next());
SimpleDateFormat sf=new SimpleDateFormat("yyyyMMddHHmmssSSS");
String time = sf.format(new Date());
String originalFilename = file.getOriginalFilename();
String timePath =time+originalFilename;
JSONArray array = JSONArray.fromObject(imgList);
String oldPath = getOldNameBy(array,originalFilename);
File f1 = new File(realPath+File.separator+oldPath);
int index=0;
if(imgPath!=null){
//写个方法进行比较 如果为true 则 替换 否则 添加
boolean compareResult =comparePath(oldPath,imgPath);
if(compareResult){
//删除原始图片,替换为新路径
f1.delete();
imgPath = imgPath.replace(oldPath,timePath);
saveImg(realPath, file, timePath);
}else{
//若图片不存在则在路径后面添加
newPath +=timePath+"*";
saveImg(realPath, file, timePath);
}
}else{
if(index == 0){
newPath =timePath;
saveImg(realPath, file, timePath);
}else{
newPath +="*"+timePath;
saveImg(realPath, file, timePath);
}
index++;
}
}
}
return retValue;
}
/**
* 验证 文件是否为新上传文件 ,若存在,返回文件名
* @param array
* @param originalFilename
* @return
*/
private String getOldNameBy(JSONArray array, String originalFilename) {
String oldimgname;
String newimgname;
for (int i = 0; i < array.size(); i++) {
JSONObject str = (JSONObject) array.get(i);
String oldimg= str.getString("oldimg");
oldimgname = oldimg.split("/")[oldimg.split("/").length-1];
String newimg= str.getString("newimg");
newimgname = newimg.split("\\\\")[newimg.split("\\\\").length-1];
if(!"".equals(newimgname)){
if(originalFilename.equals(newimgname)){
return oldimgname;
}
}
}
return null;
}
/**
* 验证路径是否重复,即图片是否已存在
* @param oldimgname
* @param imgPath
* @return
*/
private boolean comparePath(String oldimgname, String imgPath) {
String[] split = imgPath.split("\\*");
for (int j = 0; j < split.length; j++) {
if(oldimgname.equals(split[j])){
return true;
}
}
return false;
}
/**
* 保存文件到指定位置
* @param realPath
* @param file
* @param newPath
*/
private void saveImg(String realPath, MultipartFile file, String newPath) {
//路径+日期重组文件名 File.separator相当于地址分隔符 /
String path = realPath+File.separator+newPath;
try {
//将文件存到指定目录
file.transferTo(new File(path));
}catch (Exception e) {
e.printStackTrace();
}
}
总结:
读取文件时,有fileNames.hasNext()判断,所以每进入一次都应判断,且每次只能判断一个,否则在替换时会出现重复上传。