Question

我有一个用于上传图片的拖放容器。类似于stackoverflow在编辑器中的选项。如您所知，它有两种方式：

拖放图片
单击容器，然后将打开一个窗口以选择图像

现在我正在做类似的事情：

// click
$('.upload_image').on('change', function () {
    file = $(this)[0].files;
    frm = $(this).closest('form');
    addImageToInput();
    return false;
});

// drag and drop
$(".container").on('drop dragdrop', function (e) {
    file = e.originalEvent.dataTransfer.files;
    frm = $(this).closest('form');
    addImageToInput();
    return false;
});

此外，我还有一个用于预览的功能：

function addImageToInput() {
    if ( file !== "" || frm !== "" ) {
        let uploadFormData = new FormData(frm[0]);
        uploadFormData.append("imageToUpload", file[0]);
        readURL(frm.find(".upload_image")[0]);
        formData = uploadFormData;
    } else {
        alert('something went wrong');
    }
}

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('.modal-dropzone-img').html("<img src='" +  e.target.result + "' class='upload_image_preview_img'/>");
        }
        reader.readAsDataURL(input.files[0]);
    }
}

无论如何，当我通过使用“点击”（浏览）图像附加图像时，预览部分效果很好，并且预览部分不会显示（即使没有错误抛出） 当我使用拖放方法时。

经过一些测试，我发现，这些并不相同：

file = $(this)[0].files;                   // click approach
file = e.originalEvent.dataTransfer.files; // drag and drop approach

知道我怎么能让它们平等？ （换句话说，我必须让第二个像第一个一样，因为第一个是工作的）

Answer 1

我已将readURL方法稍微修改为仅接受文件，可以拖放或上传。此外addImageToInput()也相应更改

function addImageToInput() {
    if ( file !== "" || frm !== "" ) {
        let uploadFormData = new FormData(frm[0]);
        uploadFormData.append("imageToUpload", file[0]);
        readURL(file[0]);
        formData = uploadFormData;
    } else {
        alert('something went wrong');
    }
}

function readURL(input) {

    if (input) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('.modal-dropzone-img').html("<img src='" +  e.target.result + "' class='upload_image_preview_img'/>");
        }
        reader.readAsDataURL(input);
    }
}

这是一个工作小提琴

https://jsfiddle.net/153dp05q/

如何在JS中模拟$（this）[0] .files？

1 个答案: