使用“jQuery Form Plugin”手动发送拖放文件答案

【问题标题】：send drag and drop files manually using "jQuery Form Plugin"使用“jQuery Form Plugin”手动发送拖放文件
【发布时间】：2023-03-30 05:13:01
【问题描述】：

我有点卡在这里，我需要帮助.. 我正在尝试在我的网站中进行拖放文件上传，我从头开始，因为我找不到任何适合我需要的插件。

这是我目前所拥有的：

文件丢失检测：

var dropzone = document.getElementById('holder');

dropzone.ondragover = function(){
            this.className = 'well pull-left display-ex-pic drag_hover';
            return false;
        }

dropzone.ondragleave = function(){this.className = 'well pull-left display-ex-pic'; return false;}

        dropzone.ondrop = function(e){
            e.preventDefault();
            this.className = 'well pull-left display-ex-pic';
            readURLs(e.dataTransfer.files);//display the pictures
            images = e.dataTransfer.files;
            images_obj = e.dataTransfer;
        }

通过 AJAX 提交表单：

formImages = new FormData();
var status = $('#status');
$('#image_upload').hide();
$('form').ajaxForm({

    beforeSend: function() {
    $('#image_upload').show();
    $('#math li .mathquill-editable').each(function() {
        a = $('#math-text').val();
        $('#math-text').val(a + $(this).mathquill('latex') + '[{line}]');
    });

    for (var x = 0; x < images.length; x = x + 1) {
        formImages.append(images[x].fileName, images[x]);
    }
    },
    data: {'files[]': formImages},
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        $('#image_upload').attr('aria-valuenow', percentComplete).css('width', percentComplete + '%').html(percentComplete + '%');

    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
});

现在我的问题是，在用户删除文件后，文件使用e.dataTransfer.files 进入文件数组，然后我想使用“jQuery Form Plugin”提交带有进度条的文件以及所有表单数据" 从这里http://malsup.com/jquery/form/。

有谁知道如何手动使用“jQuery 表单插件”发送文件？

【问题讨论】：

标签： javascript jquery ajax forms

【解决方案1】：

我只是碰巧发现了这个插件，它在很短的实施时间内就可以完美运行。

http://www.dropzonejs.com/#installation

基本上：

包含插件
包含 HTML
为您的文件编码
服务器端的接收器（URL 中包含示例）
调整 CSS。

【讨论】：