//文件上传
$("#fileuploadsave").click(function(){
$.ajaxFileUpload({
url: 'http://localhost:8080/Data/upload/uploads.do', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (result){ //服务器成功响应处理函数
var data=result.data;
for(var i=0;i<data.length;i++){
var file_id=data[i].file_id;
var file_name=data[i].file_name;
var relative_path=data[i].relative_path;
console.log(relative_path);
var id=data[i].id;
var image1="<img src='"+relative_path+"'/>";
image1+="<span>"+file_name+"</span>";
var file_a="<a class='a1'>删除</a>";
var $file_a=$(file_a);
$file_a.data("file_id",file_id);
console.log($file_a.data("file_id"));//第一次打印
var image_a=image1+file_a;
var $image_a=$(image_a);
//显示图片
$("#upload_img").append($image_a);
}
},
error:function(){
alert("fjlasjf");
}
});
});
$("#upload_img").on("click",".a1",function(){
var file_id=$(this).data("file_id");//第二次打印
console.log(file_id);
});
<div id="upload_img"></div>
为什么第一次可以打印出,file_id值,第二次就不可以了呢,经常遇到这种使用data(),绑定数据异常,求解
.a1是什么?ajaxfileupload要上传的file对象file1?
如果是,由于ajaxfileupload是将原来的对象添加到隐藏表单提交,然后新建一个file对象放到原来的位置,所以你第二次提交时click获取的是新的file没有data缓存的数据的,将file_id作为全局变量,通过变量获取,而不是重新
第二次获取的时候var file_id=$(this).data("file_id");//第二次打印
用 var file_id=$(this).attr("file_id");//第二次打印
试试呢~
参考这个 springmvc图片上传、jquery 图片上传预览 ,如有疑问评论区留言
看花眼,因为你添加到upload_img中的a1不是你设置设置了data的那个$file_a,你添加的是新的对象$image_a,就没有data缓存数据
改成下面的
/*
var $file_a=$(file_a);
$file_a.data("file_id",file_id);
console.log($file_a.data("file_id"));
//这些代码不要了,都没关系
*/
var image_a=image1+file_a;
var $image_a = $(image_a);
$image_a.find('a').data("file_id", file_id);//////////////////缓存
//显示图片
$("#upload_img").append($image_a);
$(this).attr("file_id"); 是可以的