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!";
    }
});

使用File API以JavaScript读取文件