Question

所以基本上我被卡住了。我创建了一个简单的上传图像按钮，使我可以预览上传的图像文件。我还创建了一个按钮，该按钮创建了另一个上传图像按钮，该按钮称为“尝试”。我的第一个上传图像按钮可以正确预览图像，但是当我按“尝试”以创建另一个上传图像按钮并上传另一个图像时，它无法在其他上传图像按钮上进行预览。我只想知道我该如何解决。下面是完整的代码：

function myFunction() {
   var x = document.createElement("INPUT");
   x.type = "file";
   x.id= "file-upload"
   x.onchange= "previewFile()";
   document.getElementById("wtf").appendChild(x);
   var y = document.createElement('IMG');
   y.src= "";
   y.alt= "Image preview...";
   document.getElementById("preview").appendChild(y);
}
      
function previewFile(){
   var preview = document.querySelector('img'); //selects the query named img
   var file    = document.querySelector('input[type=file]').files[0]; //sames as here
   var reader  = new FileReader();

   reader.onloadend = function () {
       preview.src = reader.result;
   }

   if (file) {
       reader.readAsDataURL(file); //reads the data as a URL
   } else {
       preview.src = "";
   }
}

<!DOCTYPE html>
<html>
  <body>

    <p>Click the button to create a File Upload Button.</p>

    <button onclick="myFunction()">Try it</button>
    <p id="wtf">
      <input id="file-upload" type="file" onchange="previewFile()">
    </p>
    <p id="preview">
      <img src="" height="200" alt="Image preview...">
    </p>
  </body>
</html>

Answer 1

首先element.onchange使用一个函数，而不是我更改的字符串，这也是因为您需要使用不同的按钮显示不同的预览，因此需要一种区分它们的方法。我正在创建一个全局变量i来跟踪它，并将其作为参数传递给previewFile函数。

代码如下：

var i = 0;
function previewFile(index){
   var preview = document.querySelectorAll('img'); //selects the query named img
   var file    = document.querySelectorAll('input[type=file]')[index].files[0]; //sames as here
   var reader  = new FileReader();

   reader.onloadend = function () {
       preview[index].src = reader.result;
   }

   if (file) {
       reader.readAsDataURL(file); //reads the data as a URL
   } else {
       preview.src = "";
   }
}

function myFunction() {
   i++;
   var y = document.createElement('IMG');
   y.src= "";
   y.alt= "Image preview...";
   y.height = 200;
   document.getElementById("preview").appendChild(y);
   var x = document.createElement("INPUT");
   x.type = "file";
   x.id= "file-upload"
   x.onchange= function(){previewFile(i)};
   document.getElementById("wtf").appendChild(x);
}

<!DOCTYPE html>
<html>
  <body>

    <p>Click the button to create a File Upload Button.</p>

    <button onclick="myFunction()">Try it</button>
    <p id="wtf">
      <input id="file-upload" type="file" onchange="previewFile(0)">
    </p>
    <p id="preview">
      <img src="" height="200" alt="Image preview...">
    </p>
  </body>
</html>

Button创建的上载图像预览代码无法预览图像。 Javascript / HTML

1 个答案: