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

我正在处理拖放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

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

回答

相关问题