在HTML页面上拖放后显示图像

Question

我正在使用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 时，它只显示以下属性：

你能帮个忙吗？

谢谢。

- Azeem

Answer 1

我还没有尝试过，但您正在使用HTML5文件API。 您的图像是File类的实例，它本身是Blob的子类。 使用FileReader，您可以访问文件的内容。 MDN上的这篇文章链接到网络中的另一篇文章，展示了如何使用它：显示用户选择的图像缩略图。

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

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]);
    }
}

- Kiruse

Answer 2

所以，这是我解决问题的方法：

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);

    var list = document.getElementById("image-list");
    var cell = document.createElement("td");
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = files[i];
    cell.setAttribute("align", "center");
    cell.setAttribute("valign", "bottom");
    cell.appendChild(img);
    list.appendChild(cell);

    var reader = new FileReader();
    reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(files[i]);
}
}

- Azeem

---

这对我有用。关键是你可以通过编程方式将img.src设置为load事件返回的数据。谢谢！ - William Wettersten

哇，那个黑魔法的 reader.onload = 行... :D 我没能将它转换为现代语法 :D 但是它能工作！ - csomakk