我能以$ _FILES的形式得到结果吗？

时间：2015-04-03 13:49:49

标签： javascript php jquery

我正在学习拖放文件上传。以下方法是否可用于上传文件。它只是一个简单的程序，如果我通过输入类型上传图像=＆＃34;文件＆＃34 ;;我可以以数组格式获取文件信息但是如果我使用拖放方法;我得到以下输出。提前谢谢....

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()

2 个答案:

答案 0 :(得分：1)

你在ajax上有错误，因为你没有发送文件，因为发送文件抛出ajax使用：https://github.com/blueimp/jQuery-File-Upload

或者我的坏，你只需要检查$ _POST（：

答案 1 :(得分：0)

得到了答案; 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);
            }
       });

}

}）