页面只有一个input file按钮,一个确认上传按钮,要求:多次点击上传,吧图片信息保存入集合,点击确认按钮,上传所有图片
多次点击这一个按钮上传图片,在js中保存为集合,但是遇到一个问题,当我点击第二次的时候,传过来的this信息会顶替掉上一次的this信息,
也就是:上传两次,集合中有两组数据,但是这两组数据都为最后一次点击的信息。
我需要的结果为:上传两次,集合中有两组数据,每组数据为每次上传的图片所有信息(相当于每次传过来的this数据)。
在网上查了许久,也没有改正过来,幸运的是,找到的最终的解决方案:
直接上核心代码:
<span>选择图片</span>
<input οnchange="fileUp(this)" id="file-up" type="file" accept="image/*" >//点击上传,这里是我们需要添加的方法,每次点击执行
<a href="javascirpt:void(0)" οnclick="upimg();" >确定上传</a>//这里可以写自己上传的ajax方法
<script type="text/javascript">
var dellist=new Array();//接收的集合
var fileUp = function(thisvar) {//每次传过来的this
re_me = $.extend(true,{},thisvar);//这里是重点!敲黑板!
dellist.push(re_me);//添加进集合中
}
</script>
走到这一步 保存为集合已经完成
var fd = new FormData();//定义一个存放图片信息地方
for(var i=0;i<=dellist.length;i++){
fd.append("file",dellist);//遍历集合,放入存放图片的formdata中
}
//自己定义的上传方法
function uping(){
$.ajax({
url : 'XXXXX',//访问后台的上传方法路径
data : fd, //保存的formdata集合
type : 'POST',
cache : false,
processData : false,
contentType : false,
beforeSend : function(data) {
//加载中事件
var loading = $('#fountainG');
loading.show(); //id为fountainG的div,里面存放着一张加载中的动态图片
},
success : function(data) {
//执行成功事件,并关闭加载中事件
var loading = $('#fountainG');
loading.hide();
alert("上传成功");
},
error : function(data) {
//错误返回事件
var loading = $('#fountainG');
$('#image-list').html("");//展示列表为空
loading.hide();//关闭加载中图片
alert(data);
}
});
}
后台接收的方法
@RequestMapping(value = "/upload.do")
public @ResponseBody String upload(@RequestParam(value = "file") CommonsMultipartFile[] files, String phone, String[] imgName) { //上传图片
return picService.insertPic(phone,files,teacherUrl,imgName);
}
@Override
@Transactional
public String insertPic(String phone, CommonsMultipartFile[] files, String teacherUrl, String[] imgName) {
// TODO Auto-generated method stub
try {
for(int i = 0;i<files.length;i++){
MultipartFile file = files[i];
String path = teacherUrl;
String fileName = file.getOriginalFilename();
if (fileName==null || "".equals(fileName) || phone==null || "".equals(phone)) {
return "fail";
}
boolean mark = true;
if (imgName != null && imgName.length>0) {
for (String n : imgName) {//如果相片名称在删除名称集合中,则不保存
if (fileName.equals(n)) {
mark=false;
break;
}
}
}
if (mark) {
File targetFile = new File(path+File.separator+phone, phone+"_"+fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
picDao.insertPic(phone+"_"+fileName,phone);//如果照片没有上传保存记录
}
//保存
file.transferTo(targetFile);
}
}
} catch (Exception e) {
e.printStackTrace();
return "fail";
}
return "sucess";
}