Добавление ввода типа файла в форму динамически

Question

Я работаю над функцией перетаскивания n. У меня есть код, который мне нужен, чтобы поймать файл, когда он выпал в моей области сбрасывания, но у меня есть некоторые проблемы, чтобы отправить его для xmlhttprequest, поскольку я не могу отправить через jQuery или ajax.

Теперь я думаю о скрытом 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") 

Ваш район падения.

Это не как вы получите файл, хотя, вы получите его в случае падения:

$("#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');