Question

我在javascript和jquery中比较新。我正在尝试创建和自定义<input type="file">。因此，我将其隐藏在视图中，并在客户点击另一个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或undefined

Answer 1

您需要使用.data而非.attr

设置数据属性

＆＃13;

$(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());
});

＆＃13;

<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>

＆＃13;

您可能需要在文件弹出窗口中选择一个文件以查看console.log（因为它只记录更改）

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

1 个答案: