<इनपुट प्रकार = "फ़ाइल">

समझना मैं अपने सिर को पाने और वेबसाइट में चयनित छवि का उपयोग करने की कोशिश कर रहा हूं।<इनपुट प्रकार = "फ़ाइल">

<input type="file" id="userImage">

फिर जावास्क्रिप्ट में मैं यह कर सकता फ़ाइल प्राप्त करने के लिए:

var userImage = document.getElementById('#userImage').files[0];

चलो कहते हैं कि मैं एक साधारण वेबसाइट उपयोगकर्ता का उपयोग कर अपने सिस्टम से एक चित्र का चयन देता है कि करते हैं प्रश्न:

1) क्या अब मैं उपयोगकर्ता छवि का उपयोग कर सकता हूं? जैसे इसे कैनवास पर चित्रित करना, या क्या मुझे पहले इसे वेबसाइट सर्वर पर अपलोड करने की आवश्यकता है?

2) यदि मैं छवि का उपयोग करता हूं, तो वेबसाइट को इसे हर बार अपलोड करने के लिए अपलोड करना पड़ता है, या यह स्मृति में रहता है?

3) मुझे कैसे पता चलेगा कि छवि उपयोग करने के लिए तैयार है या नहीं? आपकी मदद :)

फ़ॉलो-अप

अपने जवाब के लिए धन्यवाद के लिए (एक ही कारण के लिए सभी छवियों से पहले कैनवास पर तैयार की शुरुआत में पहले से लोड किया जाना चाहिए)

धन्यवाद इतना। तो ऐसा लगता है कि यह एचटीएमएल 5 में संभव है लेकिन अभी तक सार्वभौमिक रूप से समर्थित नहीं है।

स्रोत

2012-08-24 Jamie Fearon

एचटीएमएल 4 में यह संभव नहीं होगा, लेकिन एचटीएमएल 5 में आप W3 File API का उपयोग कर स्थानीय फाइलों तक पहुंचने में सक्षम होना चाहिए। हालांकि, मुझे यकीन नहीं है कि कब (और कैसे) इसे विभिन्न ब्राउज़रों द्वारा समर्थित किया जाएगा। अपने स्थानीय फ़ायरफ़ॉक्स 14.0.1 में, निम्न कोड काम करता है और चयनित फ़ाइल की बाइनरी डेटा पैदावार:

<html> 
    <body> 
    <script type="text/javascript"> 
     function doIt() { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var img = new Image(); 
      img.src = e.target.result; 
      var c = document.getElementById("canvas"); 
      var ctx = c.getContext("2d"); 
      ctx.drawImage(img,10,10); 
      } 
     ); 
     reader.readAsDataURL(document.getElementById('userImage').files[0]); 
     } 
    </script> 

    <input type="file" id="userImage" /> 
    <button onclick="doIt()">Render Image</button><br/> 
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/> 
    </body> 
</html>

हो सकता है कि आपको:

var reader = new FileReader() 
reader.readAsDataURL(document.getElementById('userImage').files[0]) 
alert(reader.result)

निम्नलिखित पृष्ठ एक स्थानीय छवि एक कैनवास पर पेंट 2 पढ़ने पर विचार करें।

स्रोत

2012-08-24 10:29:35 tbl

आपके उत्तरों के लिए धन्यवाद। तो ऐसा लगता है कि यह एचटीएमएल 5 में संभव है लेकिन अभी तक सार्वभौमिक रूप से समर्थित नहीं है। –

+1 - अच्छा समाधान और कोड – techfoobar

आप http://caniuse.com/#feat=filereader पर FileReader API के समर्थन के बारे में अद्यतित जानकारी पा सकते हैं – garethm

-3

1) आप छवि को खोल या संशोधित नहीं कर सकते क्योंकि क्लाइंट-साइड स्क्रिप्ट ब्राउज़र सैंडबॉक्स में निष्पादित होती हैं। स्क्रिप्ट फ़ाइल में या उपयोगकर्ता फ़ाइलों के लिए उपयोग कर सकते हैं, तो यह एक सुरक्षा मुद्दा

2) नहीं, ब्राउज़र भेजने खुद फाइल ब्लॉक-दर-ब्लॉक दूरस्थ सर्वर

3) करने के लिए आइटम देखें हो जाएगा 1 :)

स्रोत

2012-08-24 10:15:19 ruX

उन लोगों के लिए जो इस उत्तर को कम करते हैं: इस समय क्लाइंट से फ़ाइल तक पहुंचने के लिए कोई समर्थन नहीं था – ruX

<इनपुट प्रकार = "फ़ाइल">

उत्तर

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