我有一个用于上传图片的拖放容器。类似于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
知道我怎么能让它们平等? (换句话说,我必须让第二个像第一个一样,因为第一个是工作的)
答案 0 :(得分: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);
}
}
这是一个工作小提琴