我正在學習拖放文件上傳。這是下面的方法可用於上傳文件。它只是一個簡單的程序，如果我通過輸入type =「file」上傳圖像;我可以以數組格式獲取文件信息，但是如果我使用拖放方法;我得到以下輸出。預先感謝您....

home.html的

<html> 
<head> 
    <title>try try</title> 
    <link href="style.css" rel="stylesheet"></link> 
    <script src="jquery.js"></script> 
    <script src="upload.js"></script>  
</head> 
<body> 
    <form id="upload"> 
     <div style="display:block; width:300px; height:300px;border:4px dashed #ccc;" id="upload_area" ondragover="return false"></div> 
     <span class="result" style="border:1px solid black;"></span> 
    </form> 
</body>

upload.js

$(document).ready(function(){ 
jQuery.event.props.push('dataTransfer'); 
$('#upload_area').bind('drop', function(e) { 
    var files = e.dataTransfer.files; 
    var formobj = document.getElementById("upload"); 
    var ans = new FormData(formobj); 
    $.ajax({ 
     type:"post", 
     data:ans, 
     cache : false, 
     url:"upload.php", 
     processData:false, 
     contentType:false, 
     success:function(response){ 

      $(".result").html(response); 

     } 
    }) 
    return false; 
}); 
})

upload.js

<?php 
    echo "<pre>"; 
    print_r($_FILES); 
    echo "</pre>"; 
?>

輸出

array()

來源

2015-04-03 Ganesh Patil

哪裏是在你的代碼的輸入類型= 「文件」字段？ – Saty 2015-04-03 13:56:38

在html中沒有'type as file'的輸入。更新你的html。 – Raja 2015-04-03 13:57:46

可能重複的[如何異步上傳文件？]（http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously） – 2015-04-03 14:11:00

您在阿賈克斯的錯誤，因爲你不發文件，發送文件扔ajax使用的是：https://github.com/blueimp/jQuery-File-Upload

或MB的我不好，和u只需要檢查$ _ POST（：

來源

2015-04-03 13:53:27 Legendary

hea @Legendary，甚至$ _POST給出了相同的結果。是的，我可以肯定地使用jquery插件，但我想了解什麼在拖放中輕鬆愉快。順便說一下，你可以使用$ _FILES通過ajax發送文件。 – 2015-04-04 04:57:50

得到了答案;在upload.js文件

一個小的變化upload.js

$(document).ready(function(){ 
$("#upload_area").bind("dragover", function(e) { 
    e.preventDefault();  
}) 
$("#upload_area").bind("drop", function(e) { 
    var file = e.originalEvent.dataTransfer.files; 
    processFileUpload(file); 
    return false; 
}); 

function processFileUpload(droppedFiles) { 
    var formobj = document.getElementById("upload"); 
    var uploadFormData = new FormData(formobj); 


    uploadFormData.append("file",droppedFiles[0]); 

     $.ajax({ 
      url : "upload.php", // use your target 
      type : "POST", 
      data : uploadFormData, 
      cache : false, 
      contentType : false, 
      processData : false, 
      success : function(ret) { 
       //alert(ret); 
       $(".result").html(ret); 
      } 
     }); 

}

}）

來源

2015-04-07 09:08:58

我可以以$ _FILES的形式得到結果

home.html的

upload.js

upload.js

輸出

回答

一個小的變化upload.js

我可以以$ _FILES的形式得到結果

home.html的

upload.js

upload.js

輸出

回答

一個小的變化upload.js

相關問題