HTML5显示上传的图像，直到下一个上传？ [英] HTML5 to display uploaded image untill next one is uploaded?

问题描述

我不确定我是否应该使用HTML5存储。
我的问题是我如何能够完成以下任务：

I'm not sure if I should use HTML5 storage for this or not. My question is about how I can accomplish the following:

想象一下博物馆里有一个空框架的墙。我希望用户从他或她的计算机上传图像。此图像将显示在墙上的框架（div）中。
如果用户想要查看另一张图片，可以删除上一张图片，然后显示下一张图片。

Think of a wall in a museum with an empty frame. I want the user to upload an image from his or her computer. This image will than be shown in the frame on the wall (a div). If the user wants to check another image, the previous image can be 'removed' and the next should show up.

下面的小提琴就是一个例子html5存储，但它存储多个图像。我只想要一个图像，当另一个上传时，它将被替换。刷新页面时存储也不是很有必要。它只是显示图像以查看它的外观。

In the fiddle below is an example of html5 storage, but it stores multiple images. I just want one image wich is being replaced when another is uploaded. It's also not neccesairy to be stored when the page is refreshed. It's just to display an image to see how it looks.

JsFiddle （HTML5rocks）

JsFiddle(HTML5rocks)

毕竟你会建议我使用HTML5存储吗？或者我可以用jQuery做到这一点吗？
提前感谢您！

Would you advise me HTML5 storage after all? Or can I do this with jQuery maybe? Thank you in advance!

代码

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  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('files').addEventListener('change', handleFileSelect, false);
</script>

推荐答案

只需更改该部分：

    reader.onload = (function(theFile) {
        return function(e) {
          document.getElementById('list').innerHTML = ['<img class="thumb" src="', 
          e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
    };
  })(f);

http://jsfiddle.net/camus/SK3gC/

这篇关于HTML5显示上传的图像，直到下一个上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！