Question

我正在开发拖放功能。我有一些代码，当我把它放在我的放置区域时，我需要捕获该文件，但由于我无法通过jQuery或ajax发送，因此我有一些问题要将它发送给xmlhttprequest。

我现在正在考虑一个隐藏的iFrame，但我真的不知道如何附加这个文件，我已经拥有了这个文件，感谢用户放弃，现有表格。

var droparea = $('#dropzone');
    var uploadButon = $('#upload');
    droparea.on('dragover',function(){
        $(this).addClass('dragover');
        return false;
    });
    droparea.on('dragleave',function(){
        $(this).removeClass('dragover');
        return false;
    });
    droparea.on('drop', function(e) {
       e.stopPropagation();
       e.preventDefault();
       $(this).removeClass('dragover');
       var files = e.originalEvent.dataTransfer.files;

       var formData = new FormData($("form")[0]);

            for( var i = 0; i < files.length; ++i ) {
                var file = files[i];
                formData.append("files[]", file);
            }

            return $.ajax({
                url: "upload.php",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(text) {
                    alert(text);
                }

            });

    });

            //the php

           <?php
             echo count($_FILES["files"]);
                for($i = 0; $i < count($_FILES["files"]["name"]) ; $i++)
                {
              if(move_uploaded_file($_FILES["files"]["tmp_name"][$i],                               "upload/".$_FILES["files"]["name"][$i]))
                echo "ok";
                   else
                echo "no";
                 }
            ?>

Answer 1

我认为你的意思是元素

$("#userDroppedFile")

是你的掉落区域。

这不是你获取文件的方式，你在drop事件中得到它：

$("#userDroppedFile").on("drag dragend dragenter dragleave dragover dragstart drop", function(e){
    var files;
    e.preventDefault();

    if( e.type === "drop" && e.originalEvent.dataTransfer ) {
        files = e.originalEvent.dataTransfer.files;
    }

    if( !files || !files.length ) {
        return;
    }

    doUpload(files);

});

在doUpload中，您可以form data from your static html form，然后将文件添加到其中并上传：

function doUpload(files) {

    var formData = new FormData($("form")[0]);

    for( var i = 0; i < files.length; ++i ) {
        var file = files[i];
        formData.append("file" + (i+1), file);
    }

    return $.ajax({
        url: "xx",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function() {
        }

    });
}

Answer 2

var myFile = $('userDropedFile');

不是有效的jQuery选择器。你或许是这样的意思：

var myFile = $('#userDropedFile');

动态地将类型文件的输入添加到表单

2 个答案: