如何使用ajax

时间:2015-12-15 16:05:32

标签: javascript php ajax file

我编写的代码是将任何上传的文件发送到php页面。我希望响应是一个包含该文件的所有信息的数组。我也使用“POST”方法上传文件。没关系吗?

我想要一个整洁干净的数组,其中包含有关文件的信息,如名称,大小,类型等。但我得到的数组如下:

enter image description here

我如何管理?完整代码:

fileupload.php文件:

<?php  ?>
<html>
<body>

<input type='file' id='up' name='image'>
<div id='imageholder' style='width:300px;height:300px;border:1px solid black;'></div>
<span id='info' style='color:red;'></span>
<script>


function fileread(event){

  if (window.FileReader && window.Blob) {


  /* Handle local files */

        var file = event.target.files[0];
        var formdata=new FormData();
        formdata.append(document.getElementById('up').name,file,file.name);


                var xhr=new  XMLHttpRequest();
                xhr.onreadystatechange=function(e){
                    if(xhr.readyState==4 && xhr.status==200){
                          console.log(xhr.response);
                    }
                }
                xhr.open('post',"../practice/classes/testimag.php",true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(formdata);



    }else {
     // File and Blob are not supported
            console.log('file and blob is not supported');
       } 



  } 

    document.getElementById('up').addEventListener('change',fileread,false);
</script>
</body>
</html>

testimag.php文件:

<?php  
    if(isset($_POST) && !empty($_POST)){

        print_r($_POST);
    }
?>

2 个答案:

答案 0 :(得分:2)

您只需将包含数据的数组解析为服务器上的JSON

即可
<?php  

   $arr = array();


    if( strtolower( $_SERVER[ 'REQUEST_METHOD' ] ) == 'post' && !empty( $_FILES ) ) {
       foreach( $_FILES as $file ) {

           $finfo = finfo_open();
           $data  = finfo_file($finfo, $file);
           finfo_close($finfo);

           array_push($arr, $data);
       }

       echo json_encode($arr);
    } else {
       echo '{"error" : "no files"}';
    }

?>

并在您的javascript中将其解析回数组/对象

xhr.onreadystatechange=function(e){
    if(xhr.readyState==4 && xhr.status==200){
         var obj = JSON.parse( xhr.response );
    }
}

这假设您已经获得了文件服务器端,这是您的数组屏幕截图所示。

较新的浏览器(Chrome&gt; 31,Firefox&gt; 10,无IE)支持设置responseType以自动解析内容

var xhr = new  XMLHttpRequest();

xhr.onreadystatechange=function(e){
    if(xhr.readyState==4 && xhr.status==200){
        console.log(xhr.response); // array / object
    }
}

xhr.open('post',"../practice/classes/testimag.php",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.responseType = "json";

xhr.send(formdata);

答案 1 :(得分:0)

文件通过$_FILES传递给PHP,而不是$_POST。如果您需要有关该文件的信息,请使用此.. $_FILES数组已包含有关上传的mimetype和大小的信息。

if(!empty($_FILES)){
    print_r($_FILES);
}

但是,如果这就是您所需要的,那么您不需要ajax。较新版本的Javascript可让您直接从浏览器获取此信息。