javascript - how to display image in file upload dynamically -


I have created a function for file upload. I get the file name and file type and do not know how to display pictures using dynamic controls! AddFileUpload function () {var div = document.createElement ('DIV'); Div.innerHTML = '& lt; Input id = "file" + counter + '"name =" file' + counter + '"type =" file "/> + '& Lt; Input id = "button '+ counter +'" type = "button" 'value = "remove" onclick = "RemoveFileUpload (this)" />;'; Document.getElementById ("FileUploadContainer") appendChild (div). Counter ++; } RemoveFileUpload function (div) {document.getElementById ("FileUploadContainer"). RemoveChild (div.parentNode); }

Here's some code from the fun project I have is.

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Script & gt; Id (e) by function {return document. GetElementById (e);} window.addEventListener ('load', docked, wrong); Function on dockedload () id ('mFileInput') AddEventListener ('change', onfile chase, incorrect); } // fileVar is an object such as & lt; Input type = 'file' & gt; // IMGimeem a & lt; Img & gt; Element - can be on the on / off screen (does not have to be added to the DOM) function loadImgFromFile (fileVar, imgElem) {var fileReader = New FileReader (); FileReader.onload = onFile loaded; FileReader.readAsBinaryString (fileVar); The function on file load (fileLoadedEvent) {var results, data; Data = fileLoadedEvent.target.result; Result = "data:"; Result + = fileVar.type; Results + = "; Base 64,"; Results + = beta (data); ImgElem.src = Results; ImgElem.origType = fileVar.type; // unnecessary to load image, used by current project}} function on function (evt) {if (this.files.length! = 0) {var tgtImg = byId ('tgt'); Var curFile = this.files [0]; LoadImgFromFile (curFile, tgtImg); }} & Lt; / Script & gt; & Lt; Style & gt; & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Input id = 'mFileInput' type = 'file' / & gt; & Lt; Br> & Lt; Img id = 'tgt' / & gt; & Lt; / Body & gt; & Lt; / Html & gt;    

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -