HTML5 to display uploaded image untill next one is uploaded?

问题

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

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.

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)

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

CODE

<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>

回答1:

just change that part :

    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/

来源：https://stackoverflow.com/questions/14521015/html5-to-display-uploaded-image-untill-next-one-is-uploaded

标签

jquery

image

html5

upload

storage