HTML5顯示上傳的圖像，直到下一個上傳？

我不確定我是否應該使用HTML5存儲。我的問題是關於如何完成以下內容：HTML5顯示上傳的圖像，直到下一個上傳？

想象一個博物館裏有一個空框架的牆。我希望用戶從他或她的電腦上傳圖像。該圖像將在牆上的框架（div）中顯示。如果用戶想要檢查其他圖像，則可以「移除」前一張圖像，然後顯示下一張圖像。

在下面的提琴是一個html5存儲的例子，但它存儲多個圖像。我只想要一個圖像在另一個圖像上傳時被替換。當頁面刷新時，存儲也不是必需的。這只是顯示圖像，看看它的外觀。

JsFiddle（HTML5ROCKS）

你會建議我HTML5存儲畢竟？或者我可以用jQuery做到這一點？提前謝謝！

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>

來源

2013-01-25 Opoe

只是改變部分：

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/

來源

2013-01-25 14:24:28 mpm

HTML5顯示上傳的圖像，直到下一個上傳？

回答

相關問題