Question

仅使用File API同时允许一个图像？什么是同时为一个图像设置限制的正确方法？

＆＃13;

<input id="browse" type="file" multiple>
<div id="imgs"></div>

<style type="text/css">
  #imgs {
    height: imageheight;
    width: imagewidth;
    position: absolute;
    top: 39px;
    left: 9px;
  }
</style>

<script type="text/javascript">
  window.URL = window.URL || window.webkitURL;
  var elBrowse = document.getElementById("browse"),
    elPic = document.getElementById("imgs"),
    useBlob = false && window.URL;

  function readImage(file) {
    var reader = new FileReader();
    reader.addEventListener("load", function() {

      var image = new Image();
      image.addEventListener("load", function() {
        elPic.appendChild(this);
      });

      image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
    });

    reader.readAsDataURL(file);
  }
  elBrowse.addEventListener("change", function() {

    var files = this.files; {
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) {

          readImage(file);
        }
      }
    }
  });
</script>

＆＃13;

Answer 1

一个解决方案可能是这样的承诺链：

在加载并附加图像之后，在前一个调用resolve（）之后执行对下一个readImage（）的调用。

你可能也想考虑使用loadend事件，即使加载由于某种原因失败也会发出，所以它不会破坏你的链。 https://developer.mozilla.org/en-US/docs/Web/Events/loadend

Answer 2

我开始了一种新方法，可以获得理想的结果。

＆＃13;

<body style="margin:8px">
<img style="position:absolute; top:39px; left:9px"
     height="imageheight" width="imagewidth">

<input type="file" onchange="previewFile()">
<script type="text/javascript">
 function previewFile() {
   var preview = document.querySelector('img');
   var file    = document.querySelector('input[type=file]').files[0];
   var reader  = new FileReader();
   reader.addEventListener("load", function () {
    preview.src = reader.result;
     }, false);
     if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) {
   reader.readAsDataURL(file); }
 }
</script>

＆＃13;

只使用File API同时允许一个图像？

2 个答案: