javascript – 在html页面上拖放后显示图像

我正在使用 JQuery / JS实现拖放图像控制.已经完成的是用户拖动一些图像文件并放入html页面.删除文件后,我只显示文件名及其大小.

我还需要在页面上显示图像.但是我无法在jquery中获取图像文件内容.

以下是我写的代码：

function handleFileUpload(files,obj) {
for (var i = 0; i < files.length; i++) {
    var fd = new FormData();
    fd.append('file',files[i]);

    var status = new createStatusbar(obj); //Using this we can set progress.
    status.setFileNameSize(files[i].name,files[i].size);
    sendFiletoServer(fd,status);

}
}
$(document).ready(function () {
var obj = $("#dragandrophandler");
obj.on('dragenter',function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border','2px solid #0B85A1');
});
obj.on('dragover',function (e) {
    e.stopPropagation();
    e.preventDefault();
});
obj.on('drop',function (e) {

    $(this).css('border','2px dotted #0B85A1');
    e.preventDefault();
    var files = e.originalEvent.dataTransfer.files;

    //We need to send dropped files to Server
    handleFileUpload(files,obj);
});
$(document).on('dragenter',function (e) {
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover',function (e) {
    e.stopPropagation();
    e.preventDefault();
    obj.css('border','2px dotted #0B85A1');
});
$(document).on('drop',function (e) {
    e.stopPropagation();
    e.preventDefault();
});

});

在调试函数handleFileUpload上,它只显示以下属性：

你能帮忙吗？

谢谢

解决方法

我没有尝试过,但你正在使用 HTML5 File API.你的图像是File类的实例化,它本身是Blob的子类.使用 FileReader,您可以访问文件的内容. MDN上的这篇文章链接到网络中的另一篇文章,该文章展示了如何使用它： Showing thumbnails of User-selected images

基本上,您可以像这样访问内容：

function handleFileUpload( files,obj ) {
    for( var i = 0; i < files.length; i++ ) {
        // ... your other code
        var reader = new FileReader();
        reader.onload = function(){
            // Should look like data:,<jibberish_data> based on which method you called
            console.log(e.target.result);
        };
        reader.readAsDataURL(files[i]);
    }
}