javascript - Loading an image to a from -

javascript - Loading an image to a <img> from <input file> -

i'm trying load image selected user through element.

i added onchange event handler input element this:

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

and preview_2 function is:

var outimage ="imagenfondo"; function preview_2(what){ globalpic = new image(); globalpic.onload = function() { document.getelementbyid(outimage).src = globalpic.src; } globalpic.src=what.value; }

where outimage has id value of tag want new image loaded.

however, appears onload never happens , not load html.

what should do?

in browsers supporting file api, can utilize filereader constructor read files 1 time have been selected user.

example document.getelementbyid('picfield').onchange = function (evt) { var tgt = evt.target || window.event.srcelement, files = tgt.files; // filereader back upwards 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 input iframe , temporarily store // them on server until user's session ends. } } browser support ie 10 safari 6.0.2 chrome 7 firefox 3.6 opera 12.02

where file api unsupported, cannot (in security conscious browsers) total path of file file input box, nor can access data. viable solution submit form hidden iframe , have file pre-uploaded server. then, when request completes set src of image location of uploaded file.

javascript html