2 powerapower powerApower 于 2017.09.06 19:12 提问

jquery data() undifined 10C
 //文件上传
                $("#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(),绑定数据异常,求解

5个回答

showbo
showbo   Ds   Rxr 2017.09.06 22:16

看花眼,因为你添加到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);
showbo
showbo 回复powerApower: $image_a.find('a').data("file_id", file_id);改为 $image_a.filter('a').data("file_id", file_id);。。就是find改为filter,因为是同辈,不是子元素,find没有找出a对象
3 个月之前 回复
powerApower
powerApower 感觉是对的,我测试 了一下,不行呢
3 个月之前 回复
showbo
showbo   Ds   Rxr 2017.09.06 21:40

.a1是什么?ajaxfileupload要上传的file对象file1?

如果是,由于ajaxfileupload是将原来的对象添加到隐藏表单提交,然后新建一个file对象放到原来的位置,所以你第二次提交时click获取的是新的file没有data缓存的数据的,将file_id作为全局变量,通过变量获取,而不是重新

code68
code68   2017.09.07 08:50

$(this).attr("file_id"); 是可以的

GMingZhou
GMingZhou   2017.09.06 21:59

参考这个 springmvc图片上传、jquery 图片上传预览 ,如有疑问评论区留言

sunny_desmond
sunny_desmond   2017.09.06 21:49

第二次获取的时候var file_id=$(this).data("file_id");//第二次打印var file_id=$(this).attr("file_id");//第二次打印试试呢~

Csdn user default icon
上传中...
上传图片
插入图片