javascript - 获取页面加载后传递给元素的数据属性

Question

我对 javascript 和 jquery 比较陌生。 我正在尝试创建和自定义 <input type="file"> 。因此，我将其隐藏在 View 中，并在客户单击另一个 a 时触发。元素。

所以基本上我的输入看起来像这样

<input type="file" style="display:none;" id="myFile">

我的元素是这样的

<a href="#" class="add_image" data-index="0" data-conind="1"><i class="fa fa-picture-o fa-2x" aria-hidden="true"></i> Choose Image</a>

因此，为了实现这一目标并将数据属性传递给我所做的输入:

//open select of image
    $(document).on('click','.add_image',function(e) {
        e.preventDefault();
        var att = $(this).data();
        $.each(att,function(index,val) {
           $('#myFile').attr(index,val); 
        });
        $('#myFile').trigger('click');
    });

这个想法是在客户选择图像后触发 onChange 事件来上传图像。但我需要数据属性。

$(document).on('change','#myFile',function(e) {
        e.preventDefault();
console.log($(this).data());
});

在这种情况下，我得到的属性为 null 或未定义

Answer 1

您需要使用 .data 设置数据属性而不是 .attr

$(document).on('click', '.add_image', function(e) {
  e.preventDefault();
  var att = $(this).data();
  $.each(att, function(index, val) {
    $('#myFile').data(index, val);
  });
  $('#myFile').trigger('click');
});

$(document).on('change', '#myFile', function(e) {
  e.preventDefault();
  console.log($(this).data());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" style="display:none;" id="myFile">

<a href="#" class="add_image" data-index="0" data-conind="1"><i class="fa fa-picture-o fa-2x" aria-hidden="true"></i> Choose Image</a>

您可能需要在文件弹出窗口中选择一个文件才能查看 console.log(因为它仅记录更改)