从输入文本 jquery 中获取数据文件答案

【问题标题】：get data file from input text jquery从输入文本 jquery 中获取数据文件
【发布时间】：2016-02-08 11:17:21
【问题描述】：

如何获取这样的数据：

data:application/pdf;base64,JVBERi0xLjQKJeHp69MKMSAwIG9iago8PC9UeXBlIC9DYXR…AKdHJhaWxlcgo8PC9TaXplIDE4Ci9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjg4MzEzCiUlRU9G

来自输入文件

$('#file').change(function(e) {
  var file = $('#file')[0].files;
  for (var i = 0; i < file.length; i++) {
    console.log(file[i].name)
    console.log(file[i].type)
    console.log(file[i].size)
  }



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" id="file" name="file" multiple="">

我得到了样例

function readURL(input) {
    var reader = new FileReader();
    reader.onload = function(e) {
        console.log(e.target.result)
    };
    reader.readAsDataURL(input);
}

我需要从输入文件的更改中获取它，因为我想把它放在像

这样的锚点的 href 中

<a class="image" href=' + e.target.result + '><img style="width:150px; height:150px;" u="image" src=' + e.target.result + '></a>

这样我的代码看起来像

$('#file').change(function(e) {
    var file = $('#file')[0].files;
    for (var i = 0; i < file.length; i++) {
        $('body').append('<a class="image" href=' + e.target.result + '><img style="width:150px; height:150px;" u="image" src=' + e.target.result + '></a>')
    }
});

【问题讨论】：

您需要将其附加到reader.onload 处理程序中，并从for 循环中调用readURL()。参见例如：jsfiddle.net/L5w7fb7j
我需要放回车吗？比如return e.target.result？ @A.Wolff
参见 jsFiddle，但您不能从 ansyc 方法（即 onload 事件）返回。您可以使用延迟对象，但这在这里毫无用处
@A.Wolff 你能把它写成答案吗？我会接受的。我不知道它应该是这样的。我也不知道文件阅读器是异步的。减少未回答的问题

标签： jquery html file input

【解决方案1】：

您想要的是添加锚一次，您可以获得可用的数据文件。从阅读器 onload 事件中附加这些元素的最简单方法。参见例如：

function readURL(input) {
    var reader = new FileReader();
    reader.onload = function(e) {
         // here data is available, you can append it
         $('body').append('<a class="image" href=' + e.target.result + '><img style="width:150px; height:150px;" u="image" src=' + e.target.result + '></a>')
    };
    reader.readAsDataURL(input);
}

$('#file').change(function(e) {

    var files = $('#file')[0].files;

    for (var i = 0; i < files.length; i++) {
         readURL(files[i]);       
    }
});

【讨论】：