html5 Tải lên hình ảnh

Question

Tôi đang cố gắng tạo trình tải lên hình ảnh đơn giản trong html5.

<input type="file" multiple=""/> 

Tất cả những gì tôi muốn làm là hiển thị những gì được tải lên mà không cần sử dụng PhP hoặc bất kỳ thứ gì. Tôi có thể sử dụng mã tương tự như thế này không?

<img src="WHATEVER WAS UPLOADED"/> 

Cảm ơn!

Answer 1

Bạn có thể lưu trữ tệp này bằng Api tệp HTML5.

Tiếp theo hướng dẫn sẽ giúp bạn bắt đầu: Reading local files in JavaScript

Answer 2

tôi tìm thấy

http://www.html5rocks.com/en/tutorials/file/dndfiles/ 

khá hữu ích.

nếu bạn không muốn đẩy hình ảnh cho một số máy chủ (i giả này từ câu hỏi của bạn), bạn chỉ có thể cập nhật hình ảnh tại địa phương:

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

hoặc somesuch.