JQuery：從url獲取圖像元素

Question

在JQuery中，我如何從url獲取圖像元素？

例如，

<input type="file" id="fileInput"/> 
var fileInput = document.getElementById('fileInput'); 

這裏它是通過在HTML5文件選擇器來完成。但是，我怎麼能從只有url的圖像？

我的要求是從url獲取圖片。

var fileInput = document.getElementById('fileInput'); //instead of this how could i get element from url 
    var fileDisplayArea = document.getElementById('fileDisplayArea'); 


    fileInput.addEventListener('change', function(e) { 
     var file = fileInput.files[0]; 
     var imageType = /image.*/; 

     if (file.type.match(imageType)) { 
      var reader = new FileReader(); 

      //save to file api 
     } else { 
      fileDisplayArea.innerHTML = "File not supported!"; 
     } 
    }); 

請幫幫忙，謝謝

Answer 1

做這樣的：

VAR的FileInput =的document.getElementById（ '的FileInput'）; //而不是這個如何從url中獲取元素 var fileDisplayArea = document.getElementById（'fileDisplayArea'）;

fileInput.addEventListener('change', function(e) { 
    var file = fileInput.files[0]; 
    var imageType = /image.*/; 

    if (file.type.match(imageType)) { 
     var reader = new FileReader(); 

     reader.onload = (function(file){ 
          return function(e){ 
            // do something 
            } 
         })(file) 
     reader.readAsDataURL(file): 
    } else { 
     fileDisplayArea.innerHTML = "File not supported!"; 
    } 
}); 

Reading files in JavaScript using the File APIs