Question

我尝试在实际上传之前预览用户选择的照片tp。到目前为止，我预览了一张照片，如何预览所有照片

我这里有输入字段，使用multiple关键字可以选择多个文件。接下来，我有一个预览窗格，其中包含一个jQuery脚本，该脚本在选择文件时呈现预览。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<style>
  img {
    width: 200px;
    height: auto;
  }
</style>
<body>
  <input id="myFile" type="file" multiple><br>
  <img class="preview"><br>
  <button>Upload</button>

  <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous">
  </script>
  <script>
    $("#myFile").change(function(event) {
      var reader = new FileReader(); // instance of the FileReader
      reader.readAsDataURL(event.target.files[0]);
      reader.onloadend = function() {
        $(".preview").prop("src", this.result);
      };
    });

    $("button").click(function() {
      var file = document.getElementById("myFile").files[0],
        xhr = new XMLHttpRequest(),
        fd = new FormData();

      xhr.addEventListener("load", uploadComplete, false);
      fd.append("fileToUpload", file);
      xhr.open("POST", "upload.php"); //this is the file accepting the upload
      xhr.send(fd);
    });

    function uploadComplete() {
      //do something when finished uploading
    }
  </script>
</body>
</html>

＆＃13;

Answer 1

要完成这项工作，您需要遍历文件输入的files集合，然后为每个图像创建一个新的阅读器，然后为每个选定的文件添加新的img元素。像这样：

$("#myFile").change(function(event) {
  var $previews = $(".previews").empty();
  [].forEach.call(this.files, function(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function() {
      $previews.append(`<img src="${this.result}" />`);
    };
  });
});

img {
  width: 200px;
  height: auto;
}

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

<input id="myFile" type="file" multiple><br />
<div class="previews"></div><br />
<button>Upload</button>

另请注意，您的<style>元素不在HTML结构中。它应放在<head>内。或者更好的是，使用外部样式表并使用<link>元素

引用它

预览所有上传的照片，而不仅仅是一个

1 个答案: