我正在学习拖放文件上传。这是下面的方法可用于上传文件。它只是一个简单的程序，如果我通过输入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

相关问题