Question

我正在使用常规的HTML File Picker输入表单项来允许我的用户选择文件。我想向他们展示他们选择的文件的缩略图，因为他们将需要选择许多图像，这会让人感到困惑。

是否有人知道是否可以显示他们选择的图像而不将其上传到服务器？如果是这样，怎么样？

如果有人可以指点我的帖子或者让我知道如何做到这一点，我们将不胜感激。

<input type="file" name="image" accept="image/*">

Answer 1

<!-- Create an <img> element to preview the image -->
<img id="image-preview" width="320">

<!-- The <input> can go anywhere in your page or <form>. Note the "onchange" attribute -->
<input type="file" name="image" accept="image/*" onchange="handleFileChange">

确保以下JavaScript紧接在以上<img>和<input>元素之后。您可以将其放在页面末尾加载的.js文件中，或页面末尾的<script>元素中。

// Select the preview image element
const imgElement = document.getElementById('image-preview');

function handleFileChange(e) {
    // If no file was selected, empty the preview <img>
    if(!e.target.files.length) return imgElement.src = '';

    // Set the <img>'s src to a reference URL to the selected file
    return imgElement.src = URL.createObjectURL(e.target.files.item(0))
}

Answer 2

这应该让你入门

http://jsfiddle.net/41go76g4/

基本上，您使用javascript中的fileAPI读取文件，并将返回的blob设置为img标记的dataURL。

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

参考：http://www.html5rocks.com/en/tutorials/file/dndfiles/

显示从filepicker中选择的图像的图像缩略图

2 个答案: