將動態類型文件的輸入添加到表單中

我正在處理拖放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"; 
       } 
      ?>

來源

2013-03-21 Santiago Nicolas Roca

那應該工作，假設'$（'userDropedFile'）'目標文件輸入。但是，如果您使用的是拖放式文件上傳，爲什麼不再進一步實施xhr文件上傳，而不是使用iframe（如果可用）？ – 2013-03-21 15:50:24

爲什麼輸入的文件不在表格中？ – Esailija 2013-03-21 15:53:58

現在，那是我的代碼。 – 2013-03-21 16:14:12

我想你的意思是該元素

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

    }); 
}

來源

2013-03-21 16:00:03 Esailija

不，我試圖簡單地thins，我的下拉區域，但即時通訊捕捉文件，如果你想我不能發佈所有的代碼，但假設我已經有了這個文件，我怎麼能把它附加到一個窗體。感謝您的快速答案，虐待嘗試！ – 2013-03-21 16:02:02

@SantiagoNicolasRoca我正在展示如何將它附加到'doUpload'函數中的一個表單中。您不能將文件附加到常規表單，只能使用ajax上傳它。 – Esailija 2013-03-21 16:02:36

多數民衆贊成即時更好，我已經嘗試過，並上傳文件，其仍然收到一個空的$ _FILES – 2013-03-21 16:12:09

var myFile = $('userDropedFile');

不是一個有效的jQuery選擇。你或許意味着：

var myFile = $('#userDropedFile');

來源

2013-03-21 15:53:32 Adam

對不起，我更新了我的代碼。 – 2013-03-21 16:19:21

將動態類型文件的輸入添加到表單中

回答

相關問題