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拖放+单击图像上传

1 个答案: