javascript - 导入一张图像和一个文本文件——选择图像时显示文本文件内容

Question

我正在尝试上传一张图像及其相应的文本文件。文本文件包含图像的属性。 当使用复选框选择图像时，如何显示文本文件的内容。

还有一件事:当我只上传文本文件时，内容是清晰的英文，但是当我上传图像和文本文件时，文本文件的内容是其他字体(不可读)，并且我只想在以下情况下显示内容图像已选择。

http://jsfiddle.net/xnf0bht7/11/

    function fileUpload(inputFile,preview){
    var file =inputFile;
    var imageType = /^image\//; 
    var fileTemp = null;

    var container = $("<div class='ct'><input  value='remove'type='checkbox'/></div>");
    if (imageType.test(file.type)) { 
        fileTemp = document.createElement("img"); 
        fileTemp.classList.add("preview_image");      

    fileTemp.file = file;
    container.append(fileTemp);
    $("#iso_preview").append(container);
    var reader = new FileReader(); 
    reader.onload = (function(aImg) {
        return function(e) { aImg.src = e.target.result; }; 
    })(fileTemp);
    reader.readAsDataURL(file); 
        } else{
       onFileSelected(event);
    }
}

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var result = document.getElementById("result");

  reader.onload = function(event) {
    result.innerHTML = event.target.result;
  };

  reader.readAsText(selectedFile);
}

Answer 1

您需要以不同的方式处理文本和图像文件。我建议您从包含 var reader = new FileReader(); (及以下)的行修改您的程序，如下所示:

    var reader = new FileReader(); 
    if (imageType.test(file.type)) {
        reader.onload = function(e) { fileTemp.src = e.target.result; };
        reader.readAsDataURL(file);
    } else {
        reader.onload = function(e) { $(fileTemp).text(e.target.result); };
        reader.readAsText(file);
    }

http://jsfiddle.net/Lw6qfryn/

基本上，您需要检查该文件是图像文件还是文本文件。如果它是一个图像文件，那么我分配给 reader.onload 的 function 与您现有的函数非常相似，但我将其更改为更具可读性的一行。这是可能的，因为不需要将 fileTemp 对象传递给自调用函数，因为在这种情况下我们可以简单地通过闭包访问 fileTemp 对象。因此，不要出现这种“困惑”:

reader.onload = (function(aImg) {
        return function(e) { aImg.src = e.target.result; }; 
    })(fileTemp);

你可以这样做:

reader.onload = function(e) { fileTemp.src = e.target.result; };

由于闭包，可以从回调函数访问 fileTemp 变量。

如果文件不是图像文件，那么为了简单起见，我们假设它是一个文本文件(这是一个错误的假设!)，在这种情况下，我们可以将此function分配给reader .onload:

function(e) { $(fileTemp).text(e.target.result); }

在此函数中，我在 fileTemp 变量周围使用了 jQuery 包装器，使其成为 jQuery 对象，然后使用 jQuery's .text()函数将文件内容放入 div 中。

还有一个重要的区别:我们需要使用 reader.readAsDataURL 方法读取图像文件，而需要使用 reader.readAsText 方法读取文本文件。 I looked up the relevant FileReader API info here .