Question

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

还有一件事：当我只上传文本文件时，内容是用英文清楚的，但当我上传图像和文本文件时，文本文件的内容是其他字体（不可读），我只想在显示内容时图像被选中。

    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/

基本上，您需要检查文件是图像文件还是文本文件。如果它是图像文件，那么我分配给function的{{1}}与您现有的功能非常相似，但我将其更改为更易读的内容。这是可能的，因为不需要将reader.onload对象传递给自调用函数，因为在这种情况下，我们可以通过闭包简单地访问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：< / p>

reader.onload

在这个函数中，我使用function(e) { $(fileTemp).text(e.target.result); }变量周围的jQuery包装器使它成为一个jQuery对象，然后我使用jQuery's .text()函数将文件内容放入div中。

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

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

1 个答案: