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

Question

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

我现在正在考虑一个隐藏的 iFrame，但我真的不知道如何将这个文件附加到一个现有的表单中，这要归功于用户 drop。

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

var myFile = $('userDropedFile');

不是一个有效的 jQuery 选择器。你的意思是：

var myFile = $('#userDropedFile');

Answer 2

我认为你的意思是元素

$("#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() {
        }

    });
}