2012-07-20 12 views
6

मैंने उपयोगकर्ता को स्थानीय संग्रहण में एक छवि अपलोड करने की सफलतापूर्वक अनुमति दी है, लेकिन मैं उस छवि को लेने और पृष्ठ पर एक छवि तत्व भरने में सक्षम होना चाहता हूं उस के साथ।स्थानीय स्टोरेज में एक छवि लोड करना और उस स्थान पर एक छवि स्रोत सेट करना

<h3>Please upload the image you wish to use.</h3> 
<input id="photoin" type="file" accept="image/*;capture=camera"></input> 
<a href="#delete_1" data-role="button" onClick="save()">Submit</a> 

<script> 
    var i = 0; 
    function save(){     
     var input = document.getElementById("photoin").value; 
     var name = "photo_" + i; 
     localStorage.setItem(name, input);  
     $("#QR").src = window.localStorage[name]; 
     i++; 
    } 
</script> 

मैं कुछ है कि सफलतापूर्वक मुझे भंडारण में छवि का URL दे देंगे के लिए देख रहा हूँ, के रूप में देख रहा है "window.localStorage [नाम]" केवल कि कुंजी के साथ रखा मान देता है।

धन्यवाद!

+0

आप वास्तव में ऐसा क्यों करना चाहते हैं? ब्राउज़र कैश मेजबान मशीन पर अपनी छवियों को रखने के लिए पर्याप्त नहीं है? – devundef

+0

मैं चाहता हूं कि उपयोगकर्ता किसी पृष्ठ पर सामग्री को बदलने में सक्षम हो (यानी मैं चाहता हूं कि उपयोगकर्ता अपनी छवि अपलोड करे, न कि मेरा, और फिर उस छवि को पृष्ठ पर दिखाई दे) – NodeNodeNode

+0

मुझे यह मिल गया है! माईज आप छवि को बेस 64 में परिवर्तित कर सकते हैं और फिर src = "data: image/png; <.. base64 छवि डेटा ...>" में डाल सकते हैं। छवि फ़ाइल को पढ़ने के लिए आपको HTML5 फ़ाइल एपीआई का उपयोग करना होगा और फिर डेटा को बेस 64 में परिवर्तित करना होगा। यह पोस्ट आपको कनवर्टन पर मदद करेगा: http://stackoverflow.com/questions/246801/how-can-you-encode-to-base64-using-javascript#246813 – devundef

उत्तर

12

वैसे आप localStorage में वास्तविक छवि डेटा स्टोर कर सकते हैं (हालांकि सावधान रहना - एक सीमा होती है)

बिट करने के लिए नीचे the HTML5 rocks tutorial & पुस्तक पर एक नज़र अध्यक्षता पढ़ना फ़ाइलें

यहाँ फ़ाइल है पढ़ा जा रहा है तो आउटपुट आईएमजी में डाल दिया: src टैग। आप इसे स्थानीय स्टोरेज

उदाहरण: http://jsfiddle.net/8V9w6/ - एक छवि फ़ाइल का चयन करें, थंबनेल देखें? फिर पेज को फिर से लोड करें। थंबनेल वहां रहना चाहिए। (नवीनतम क्रोम/फ़ायरफ़ॉक्स काम करता है)

+0

वही है जो मैं चाहता हूं! मैं इसे आज़माउंगा और आपको बताऊंगा कि यह कैसे काम कर रहा है! – NodeNodeNode

संबंधित मुद्दे