jQuery 拖放 + 单击图片上传

Question

我想要一个简单的拖放区来通过 AJAX 和 jQuery 上传图片。我找到了一些插件，但它们太过定制化，无法满足需要，我无法让它们中的任何一个正常工作。 我还希望拖放区可以点击，以便从 OS 文件对话框中手动选择文件。

我找到了这个脚本，它运行良好，但拖放区不可点击：

// ---------------------------- drop zone to upload image : '#dropfile'
$(document).on('dragenter', '#dropfile', function() {
            return false;
});
 
$(document).on('dragover', '#dropfile', function(e){
            e.preventDefault();
            e.stopPropagation();
            return false;
});
 
$(document).on('dragleave', '#dropfile', function(e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
});

$(document).on('drop', '#dropfile', function(e) {
            if(e.originalEvent.dataTransfer){
                       if(e.originalEvent.dataTransfer.files.length) {
                                   // Stop the propagation of the event
                                   e.preventDefault();
                                   e.stopPropagation();
                                   // Main function to upload
                                   upload(e.originalEvent.dataTransfer.files);
                       }
            }
            return false;
});

function upload(files) {
            var f = files[0] ;
 
            // Only process image files.
            if (!f.type.match('image/jpeg')) {
                       alert(‘The file must be a jpeg image’) ;
                       return false ;
            }
            var reader = new FileReader();
            // When the image is loaded, run handleReaderLoad function
            reader.onload = handleReaderLoad;
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);            
}

function handleReaderLoad(evt) {
            var pic = {};
            pic.file = evt.target.result.split(',')[1];
            var str = jQuery.param(pic);
            $.ajax({
                       type: 'POST',
                       url: ‘url_to_php_script.php’,
                       data: str,
                       success: function(data) {
                                   //do_something(data) ;
                       }
            });
}

所以我添加了一个不可见的文件类型输入，但是图像数据好像发送了两次。我想这是由于原始拖放区的不良事件传播造成的：

// ---------------------------- clickable drop zone with invisible file input '#inputFile'
$('#dropfile).on('click', function() {
    $('input#inputFile').trigger('click');
    $('input#inputFile').change(function(e) {
        upload($('input#inputFile')[0].files);
    });
});

我尝试添加这些行，但数据总是发送两次：

$('#dropfile).on('click', function() {
    $('input#inputFile').trigger('click');
    $('input#inputFile').change(function(e) {
        upload($('input#inputFile')[0].files);
        // -------------- stop sending data twice ???
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
});

Answer 1

我仍然不知道为什么数据会发送两次，但我在这里找到了一个更好的脚本： https://makitweb.com/drag-and-drop-file-upload-with-jquery-and-ajax/

jQuery 拖放 + 单击图片上传

jQuery Drag-and-Drop + click Image Upload

javascript

ajax

upload

jquery

file-upload