Preview A Url Image Link Before Uploading

[friedice]

i want to display the image of a url image

while dynamically loaded on a div under the input type

is there a way to do it?

form method="POST"  action="upload.php">
 <br/><br/>
  <pre>Upload File:  <input type="file" name="images" id="images"/>
  </br>Use Url:	  <input type="text" name="urlimages" id="urlimages" style="width:280px;" value=""/>

  </pre>


  <button type="submit" id="btn">Publish Files!</button>
 </form>
  <div id="response"></div>
   <ul id="image-list"> 
   <pre><p id="imgdesc" >Description:  <textarea   rows="2"  style="width:395px;"></textarea></p></pre>
 </ul>
 <div id="imageHolder"></div>

i got upload file part to work to preview but not this one

 

i think because its on the server side ...

[jazzman1]

I'm not sure for others browsers, you could check -> https://developer.mozilla.org/en-US/docs/DOM/FileReader

[friedice]

yeah i tried using that as well but it doesnt seem to handle urls images :/

 

from

<input type="text" >

[ManiacDan]

What have you tried so far? This can be done in a single line of javascript right in your input tag.

[friedice]

i tried using the same way as the input-file type method i got workin

which is this function

(function () {
var input = document.getElementById("urlimages"),
 formdata = false;
function showUploadedItem (source) {
   var list = document.getElementById("image-list"),
 li   = document.createElement("li"),
 img  = document.createElement("img");
  p = document.createElement("p");
   img.src = source;
 alert(img.src);
   li.appendChild(img);
 list.appendChild(li);
 li.appendChild(p);
}  
if (window.FormData) {
   formdata = new FormData();
   document.getElementById("btn").style.display = "none";
}

 input.addEventListener("change", function (evt) {
  document.getElementById("response").innerHTML = "checking image . . ."
 document.getElementById("imgdesc").style.display = "block";

 if (formdata) {
  $.ajax({
   url: "upload.php",
   type: "POST",
   data: formdata,
   processData: false,
   contentType: false,
   success: function (res) {
 document.getElementById("response").innerHTML = res;
   }

  });
 }
}, false);
}());