jquery 如何访问javascript创建的元素以供上传？

dgsult0t 于 2023-01-30 发布在 jQuery

关注(0)|答案(3)|浏览(115)

我尝试自动提示用户上载CSV文件，然后计划访问其中的数据，但无法执行此操作。我做错了什么？input.name始终未定义，查看整个对象不会提供任何相关详细信息。
这个查询的源代码主要来自Open file dialog box in JavaScript这个问题的答案，我试图完全用javascript而不是HTML来实现这个查询。
jsfiddle

$(document).ready(function() {
        var input = $(document.createElement('input')); 
    input.attr("type", "file");
    input.on('change',function(){
        alert(JSON.stringify(input.name, null, 4));
        alert(JSON.stringify(input, null, 4));
        });
    input.trigger('click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jquery

来源：https://stackoverflow.com/questions/70490741/how-do-i-access-an-element-created-by-javascript-for-upload

3条答案

按热度按时间

zour9fqk1#

input是$()的返回值。它是jQuery对象，而不是DOM对象。要访问底层DOM对象的name属性，请使用the prop method。

input.prop('name')

赞(0）回复(0）举报 2023-01-30

dldeef672#

我终于让它工作了。这是解决办法

$(document).ready(function() {
  var input = $(document.createElement('input'));
  input.attr("type", "file");
  input.on('change', function() {
    var csvFile = input[0].files[0];
    var ext = csvFile.name.split(".").pop().toLowerCase();

    if (ext != "csv") {
      alert('upload csv');
      return false;
    }
    if (csvFile != undefined) {
      reader = new FileReader();
      reader.onload = function(e) {
        var data = $.csv.toObjects(e.target.result);
        alert(JSON.stringify(data, null, 4));

        $.each(data, function(index, val) {
          //do something with each row of data val.ColumnName

        });
      }
      reader.readAsText(csvFile);
    }
  });
  input.trigger('click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js"></script>

赞(0）回复(0）举报 2023-01-30

ao218c7q3#

已更新方法，安全实现到位：2023-01-24
你只是不能使用文档就绪功能，而必须强制用户启动文件打开对话框：

<html>
<head>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<a href="#">Just click me.</a>
<script type="text/javascript">
    console.log(jQuery(). jquery);
    
    $("a").click(function() {
      var input = $(document.createElement('input'));
      input.attr("type", "file");
      input.on('change', function() {
        var csvFile = input[0].files[0];
        var ext = csvFile.name.split(".").pop().toLowerCase();

        if (ext != "csv") {
          alert('upload csv');
          return false;
        }
        if (csvFile != undefined) {
          reader = new FileReader();
          reader.onload = function(e) {
            var data = $.csv.toObjects(e.target.result);
            alert(JSON.stringify(data, null, 4));

            $.each(data, function(index, val) {
              //do something with each row of data val.ColumnName

            });
          }
          reader.readAsText(csvFile);
        }
      });
      input.trigger('click');
    });

</script>

<body>
</html>

赞(0）回复(0）举报 2023-01-30

我来回答

jquery 如何访问javascript创建的元素以供上传？

3条答案

相关问题

热门标签

最新问答