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