एक छवि को <इनपुट फ़ाइल> से <img> लोड कर रहा है

Question 1

मैं एक तत्व के माध्यम से उपयोगकर्ता द्वारा चुनी गई छवि को लोड करने की कोशिश कर रहा हूं।

मैंने इस तरह के इनपुट तत्व के लिए एक ऑनचेंज ईवेंट हैंडलर जोड़ा:

<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/>

और प्रीव्यू 2 फंक्शन है:

var outImage ="imagenFondo";
function preview_2(what){
    globalPic = new Image();
    globalPic.onload = function() {
        document.getElementById(outImage).src = globalPic.src;
    }
    globalPic.src=what.value;
}

जहां outImage में टैग का आईडी मान है जहां मैं चाहता हूं कि नई तस्वीर लोड की जाए।

हालाँकि, ऐसा प्रतीत होता है कि ऑनलोड कभी नहीं होता है और यह html में कुछ भी लोड नहीं करता है।

मुझे क्या करना चाहिए?

Question 2

फ़ाइल API का समर्थन करने वाले ब्राउज़र में , आप उपयोगकर्ता द्वारा चुने जाने के बाद फ़ाइलों को पढ़ने के लिए FileReader कंस्ट्रक्टर का उपयोग कर सकते हैं ।

उदाहरण

document.getElementById('picField').onchange = function (evt) {
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    // FileReader support
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            document.getElementById(outImage).src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }

    // Not supported
    else {
        // fallback -- perhaps submit the input to an iframe and temporarily store
        // them on the server until the user's session ends.
    }
}

ब्राउज़र का समर्थन

IE १०
सफारी 6.0.2
क्रोम 7
फ़ायरफ़ॉक्स 3.6
ओपेरा 12.02

जहाँ फ़ाइल API असमर्थित है, आप (अधिकांश सुरक्षा सचेत ब्राउज़रों में) फ़ाइल इनपुट बॉक्स से फ़ाइल का पूर्ण पथ प्राप्त नहीं कर सकते, और न ही आप डेटा तक पहुँच सकते हैं। एकमात्र व्यवहार्य समाधान एक छिपे हुए iframe को फ़ॉर्म सबमिट करना और फ़ाइल को सर्वर पर पूर्व-अपलोड करना होगा। फिर, जब वह अनुरोध पूरा हो जाता है तो आप अपलोड की गई फ़ाइल के स्थान पर छवि का src सेट कर सकते हैं।

Question 3

जैसा कि iEamin ने अपने उत्तर में कहा है, HTML 5 अब इसका समर्थन करता है। उसने जो लिंक दिया था, वह http://www.html5rocks.com/en/tutorials/file/dndfiles/ , उत्कृष्ट है। यहां उस साइट पर नमूनों के आधार पर एक न्यूनतम नमूना है, लेकिन उस साइट को अधिक गहन उदाहरणों के लिए देखें।

onchangeअपने HTML में एक ईवेंट श्रोता जोड़ें :

<input type="file" onchange="onFileSelected(event)">

आईडी के साथ एक छवि टैग बनाएं (मैं height=200यह सुनिश्चित करने के लिए निर्दिष्ट कर रहा हूं कि छवि बहुत बड़ी ऑनस्क्रीन नहीं है):

<img id="myimage" height="200">

यहाँ onchangeघटना श्रोता का जावास्क्रिप्ट है। यह उस Fileवस्तु को लेता है जिसे पारित किया गया था event.target.files[0], FileReaderअपनी सामग्री को पढ़ने के लिए एक निर्माण करता है, और परिणामी data:URL को imgटैग में असाइन करने के लिए एक नया ईवेंट श्रोता सेट करता है :

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("myimage");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

Question 4

$('document').ready(function () {
    $("#imgload").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imgshow').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="imgload" >
<img src="#" id="imgshow" align="left">

स्निपेट का विस्तार करें

यह jQuery में मेरे लिए काम करता है।

Question 5

ES2017 रास्ता

// convert file to a base64 url
const readURL = file => {
    return new Promise((res, rej) => {
        const reader = new FileReader();
        reader.onload = e => res(e.target.result);
        reader.onerror = e => rej(e);
        reader.readAsDataURL(file);
    });
};

// for demo
const fileInput = document.createElement('input');
fileInput.type = 'file';
const img = document.createElement('img');
img.attributeStyleMap.set('max-width', '320px');
document.body.appendChild(fileInput);
document.body.appendChild(img);

const preview = async event => {
    const file = event.target.files[0];
    const url = await readURL(file);
    img.src = url;
};

fileInput.addEventListener('change', preview);

स्निपेट का विस्तार करें

Question 6

एंडी ई सही है कि ऐसा करने के लिए कोई HTML- आधारित तरीका नहीं है *; लेकिन अगर आप फ्लैश का उपयोग करने के इच्छुक हैं, तो आप यह कर सकते हैं। निम्नलिखित उन प्रणालियों पर मज़बूती से काम करता है जो फ़्लैश स्थापित है। यदि आपके ऐप को iPhone पर काम करना है, तो निश्चित रूप से आपको HTML- आधारित समाधान की आवश्यकता होगी।

* ( अद्यतन 4/22/2013: HTML अब HTML5 में इसका समर्थन करता है। अन्य उत्तर देखें।)

फ्लैश अपलोडिंग के अन्य फायदे भी हैं - फ्लैश आपको एक बड़ी फ़ाइल के अपलोड के रूप में एक प्रगति बार दिखाने की क्षमता देता है। (मुझे पूरा यकीन है कि दृश्यों के पीछे फ्लैश का उपयोग करके Gmail यह कैसे करता है, हालांकि मैं इसके बारे में गलत हो सकता हूं।)

यहां एक नमूना Flex 4 ऐप है जो उपयोगकर्ता को एक फ़ाइल चुनने की अनुमति देता है, और फिर उसे प्रदर्शित करता है:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button x="10" y="10" label="Choose file..." click="showFilePicker()" />
    <mx:Image id="myImage" x="9" y="44"/>
    <fx:Script>
        <![CDATA[
            private var fr:FileReference = new FileReference();

            // Called when the app starts.
            private function init():void
            {
                // Set up event handlers.
                fr.addEventListener(Event.SELECT, onSelect);
                fr.addEventListener(Event.COMPLETE, onComplete);
            }

            // Called when the user clicks "Choose file..."
            private function showFilePicker():void
            {
                fr.browse();
            }

            // Called when fr.browse() dispatches Event.SELECT to indicate
            // that the user has picked a file.
            private function onSelect(e:Event):void
            {
                fr.load(); // start reading the file
            }

            // Called when fr.load() dispatches Event.COMPLETE to indicate
            // that the file has finished loading.
            private function onComplete(e:Event):void
            {
                myImage.data = fr.data; // load the file's data into the Image
            }
        ]]>
    </fx:Script>
</s:Application>

Question 7

var outImage ="imagenFondo";
function preview_2(obj)
{
	if (FileReader)
	{
		var reader = new FileReader();
		reader.readAsDataURL(obj.files[0]);
		reader.onload = function (e) {
		var image=new Image();
		image.src=e.target.result;
		image.onload = function () {
			document.getElementById(outImage).src=image.src;
		};
		}
	}
	else
	{
		    // Not supported
	}
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>preview photo</title>
</head>

<body>
<form>
	<input type="file" onChange="preview_2(this);"><br>
	<img id="imagenFondo" style="height: 300px;width: 300px;">
</form>
</body>
</html>

स्निपेट का विस्तार करें