एचटीएमएल 5 छवि अपलोड

Question

मैं html5 में एक बहुत ही सरल छवि अपलोडर बनाने की कोशिश कर रहा हूं।

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

मैं बस इतना करना चाहता हूं कि पीएचपी या कुछ भी इस्तेमाल किए बिना अपलोड किया गया है। क्या मैं इस तरह के कोड का उपयोग कर सकता हूं?

<img src="WHATEVER WAS UPLOADED"/> 

धन्यवाद!

Answer 1

आप इसे HTML5 फ़ाइल एपीआई के साथ संग्रहीत कर सकते हैं।

बाद ट्यूटोरियल आप मिलना चाहिए शुरू कर दिया: Reading local files in JavaScript

Answer 2

मैं

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

बल्कि उपयोगी पाया।

अगर आप न कुछ सर्वर के लिए छवि को धक्का करना चाहते हैं (मैं अपने प्रश्न से इस मान), तो आप सिर्फ स्थानीय स्तर पर छवि को अद्यतन कर सकते हैं:

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

या somesuch।