Javascript 使用“手动发送拖放文件”;jQuery表单插件";

Javascript 使用“手动发送拖放文件”;jQuery表单插件";,javascript,jquery,ajax,forms,Javascript,Jquery,Ajax,Forms,我有点困在这里,需要帮助。。 我试图在我的网站上进行拖放文件上传,我从零开始,因为我找不到任何适合我需要的插件 这就是我到目前为止所做的: 文件丢失检测: var dropzone = document.getElementById('holder'); dropzone.ondragover = function(){ this.className = 'well pull-left display-ex-pic drag_hover'; re

我有点困在这里,需要帮助。。 我试图在我的网站上进行拖放文件上传,我从零开始,因为我找不到任何适合我需要的插件

这就是我到目前为止所做的:

文件丢失检测:

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);
    }
});
formImages=newformdata();
变量状态=$(“#状态”);
$(“#图像上传”).hide();
$('form').ajaxForm({
beforeSend:function(){
$(“#图像上传”).show();
$('#math li.mathquill可编辑')。每个(函数(){
a=$(“#数学文本”).val();
$('#math text').val(a++$(this.mathquill('latex')++'[{line}]');
});
对于(变量x=0;x
现在我的问题是,在用户删除文件后,文件使用
e.dataTransfer.files
进入一个文件数组,然后我想使用“jQuery表单插件”从这里提交这些文件和进度条以及所有表单数据


有人知道如何使用“jQuery表单插件”手动发送文件吗?

我碰巧发现了这个插件,它可以在很短的时间内完美地运行

基本上:

  • 包括插件
  • 包括HTML
  • 给你的文件编码
  • 服务器端的接收器(URL中包含的示例)
  • 调整 CSS