获取多个文件选择的所有路径答案

【问题标题】：Get all paths at multiple file select获取多个文件选择的所有路径
【发布时间】：2014-03-17 12:41:59
【问题描述】：

我用

<input type="file" multiple="multiple" name="upload" id="id_upload" />

我只能从一个文件中获取值

 value: "C:\fakepath\2012-09-18 10.47.18.jpg"

因为路径在 input.files 中不可用

 files: FileList
  0: File
   lastModifiedDate: Tue Sep 18 2012 02:47:18 GMT+0200 (Vest-Europa (sommertid))
    name: "2012-09-18 10.47.18.jpg"
    queueItem: jQuery.fn.jQuery.init[1]
    size: 1064960
    type: "image/jpeg"
    uploading: true
    webkitRelativePath: ""
    __proto__: File

如何获取所有选定文件的路径？我试图得到的是来自所有选定文件的 EXIF 数据，使用这个This EXIF reader

【问题讨论】：

出于安全原因，您不应该能够读取本地文件路径。您可以尝试查看您的 EXIF 阅读器是否适用于将图像数据集作为数据 URI 的图像对象（如果是，则通过 FileReader 创建一个并将其分配给图像）——否则您可能必须将文件上传到如果您的 EXIF 阅读器只想通过 HTTP URL(?) 处理图像，则首先是服务器。

标签： jquery html fileapi

【解决方案1】：

您可以使用以下；

<input id="files" type="file" multiple/>
<div id="result"></div>

var filesInput = $("#files");

filesInput.on("change", function(e) {
    var files = e.target.files; //FileList object
    var result = $("#result");

    $.each(files, function(i, file) {
        var pReader = new FileReader(); 

        pReader.addEventListener("load", function(e){
            var pic = e.target;                
            result.append("<img class='thumbnail' src='" + pic.result + "'/>"); 
            show();

        });
        pReader.readAsDataURL(file);

    });


});

您可以在此处查看演示：http://jsfiddle.net/yT3PX/14。当您选择文件时，您可以单击 imgs 来查看 exif 数据。但是，在 jsfiddle 上是不允许获取 exif 数据的。您可以在演示中看到加载的多个图像

【讨论】：

@AlizainPrasla 感谢您的警告。 Mozilla 对我的代码有一些问题。我已经更新了代码和演示。你现在可以看到here