DropzoneJS：在 div 中上传之前预览所选图像作为 <img>

Question

我目前正在寻找一种方法来显示选定的图像，然后再通过 DropzoneJS 在 div 包装器中将其作为 <img> 元素上传。这里有人告诉我这是可能的，但我找不到方法。所以也许有人知道该怎么做？

jQuery(document).ready(function() {
  jQuery("#upload-image-dropzone").dropzone({
    url: "my-ajax-url",
    dictDefaultMessage: "Move files here to upload",
    autoProcessQueue: false,
    previewsContainer: !1,
    maxFilesize: 20,
    maxFiles: 1,
    uploadMultiple: !1,
    acceptedFiles: ".png, .jpg, .jpeg",
    init: function() {
      this.on("addedfile", function(file) {
        this.files.length > this.options.maxFiles && this.removeFile(this.files[0]);
      })
    },
    success: function() {}
  });
});

#upload-image-dropzone {
  width: 100%;
  height: 60px;
  border: 1px dotted #222222;
  border-radius: 3px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js" integrity="sha256-cs4thShDfjkqFGk5s2Lxj35sgSRr4MRcyccmi0WKqCM=" crossorigin="anonymous"></script>
<div id="upload-image-dropzone"></div>
<div id="image-preview-container"><img/></div>

Answer 1

在文件输入中选择图像后，您可以使用 FileReader API 预览图像。

注意对IE 10/11的支持是部分的，IE9完全不支持(ref)

** 在您的特定场景中，将 "importImage" 函数放在 "addedfile" 侦听器中。 https://jsfiddle.net/yzm8v203/3/

function importImage(input) {
  let fileReference = input.files && input.files[0];
  
  if(fileReference){
    var reader = new FileReader();
    
    reader.onload = (event) => {
   document.getElementById('preview').src = event.target.result;
    }
    
    reader.readAsDataURL(fileReference); 
    
  }

}

document.getElementById('uploadInput').addEventListener('change', function(){ importImage(this) })

<input type='file' id="uploadInput" />
<img id="preview" src="" alt="Image preview" />

DropzoneJS：在 div 中上传之前预览所选图像作为 <img>

DropzoneJS: Preview selected image before upload in div as <img>

javascript

jquery

html

css

dropzone.js