javascript - ajax結合html5中的file實作檔案上傳，後台用PHP接收，該如何用PHP接收傳過來的formData?-php教程-PHP中文網

javascript - ajax結合html5中的file實作檔案上傳，後台用PHP接收，該如何用PHP接收傳過來的formData?

WBOY

發布： 2016-08-08 09:06:53

原創

2269 人瀏覽過

如何用PHP接收前端傳送過來的文件，formdata這個物件的文件到是什麼類型的二進位的資料嗎？
前端程式碼：

<code><input type="file" name="file" id="file" multiple>
<script type="text/javascript">
    var file = document.querySelector("#file");
    file.onchange = function(){
        var files = this.files;
        for(var i=0;i<files.length;i++){
            ajax('ajax.php',files[i],function(data){
                console.log(data)
                console.log('fn')
            })
        }
    }
    function ajax(url,data,fn){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status==200){
                fn(xhr.responseText)
            }
        }
        var formData = new FormData();
        formData.append('file',data);
        xhr.open('POST',url,true);
        //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(formData);
    }
</script></code>

登入後複製

php程式碼：

<code><?php
if(!empty($_FILES['file'])){
    $fileinfo = $_FILES['file'];
    $destination = "image/";
    $destination = $destination.basename($_FILES['file']['name']);
    move_uploaded_file($fileinfo['tmp_name'],$destination);
    echo "succ";
}
?></code>

登入後複製

不知道為什麼if(!empty($_FILES['file']))這判斷一直false，改用if(!empty($_POST['file']))也是一樣；哪位知道後台是如何接收傳過來的文件的嗎？可不可以給個demo的PHP檔!

回覆內容：

如何用PHP接收前端傳送過來的文件，formdata這個物件的文件到是什麼類型的二進位的資料嗎？
前端程式碼：

<code><input type="file" name="file" id="file" multiple>
<script type="text/javascript">
    var file = document.querySelector("#file");
    file.onchange = function(){
        var files = this.files;
        for(var i=0;i<files.length;i++){
            ajax('ajax.php',files[i],function(data){
                console.log(data)
                console.log('fn')
            })
        }
    }
    function ajax(url,data,fn){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status==200){
                fn(xhr.responseText)
            }
        }
        var formData = new FormData();
        formData.append('file',data);
        xhr.open('POST',url,true);
        //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(formData);
    }
</script></code>

登入後複製

php程式碼：

<code><?php
if(!empty($_FILES['file'])){
    $fileinfo = $_FILES['file'];
    $destination = "image/";
    $destination = $destination.basename($_FILES['file']['name']);
    move_uploaded_file($fileinfo['tmp_name'],$destination);
    echo "succ";
}
?></code>

登入後複製

我在php中加了3個日誌記錄：

<code>file_put_contents('/tmp/tmp.log', '$_FILES'.":\n".print_r($_FILES, true)."\n\n", FILE_APPEND);
file_put_contents('/tmp/tmp.log', '$_POST'.":\n".print_r($_POST, true)."\n\n", FILE_APPEND);
file_put_contents('/tmp/tmp.log', '$_SERVER'.":\n".print_r($_SERVER, true)."\n\n", FILE_APPEND);</code>

登入後複製

儲存路徑改成tmp了，其他沒變，得到的結果：

<code>[root@localhost tmp]# cat tmp.log 
$_FILES:
Array
(
    [file] => Array
        (
            [name] => Screenshot_2010-01-01-08-11-30.png
            [type] => image/png
            [tmp_name] => /tmp/phposvIcw
            [error] => 0
            [size] => 30920
        )

)


$_POST:
Array
(
)


$_SERVER:
Array
(
    [USER] => nginx
    [HOME] => /var/lib/nginx
    [FCGI_ROLE] => RESPONDER
    [SCRIPT_FILENAME] => /var/www/test.php
    [SCRIPT_NAME] => /test.php
    [PATH_INFO] => 
    [QUERY_STRING] => 
    [REQUEST_METHOD] => POST
    [CONTENT_TYPE] => multipart/form-data; boundary=----WebKitFormBoundaryiJpJZSxazdqa8hzb
    [CONTENT_LENGTH] => 31127
    [REQUEST_URI] => /test.php
    [DOCUMENT_URI] => /test.php
    [DOCUMENT_ROOT] => /var/www
    [SERVER_PROTOCOL] => HTTP/1.1
    [GATEWAY_INTERFACE] => CGI/1.1
    [SERVER_SOFTWARE] => nginx/1.6.3
    [REMOTE_ADDR] => 192.168.255.1
    [REMOTE_PORT] => 60032
    [SERVER_ADDR] => 192.168.255.128
    [SERVER_PORT] => 80
    [SERVER_NAME] => 
    [REDIRECT_STATUS] => 200
    [HTTP_HOST] => 192.168.255.128
    [HTTP_CONNECTION] => keep-alive
    [HTTP_CONTENT_LENGTH] => 31127
    [HTTP_ORIGIN] => http://192.168.255.128
    [HTTP_USER_AGENT] => Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
    [HTTP_CONTENT_TYPE] => multipart/form-data; boundary=----WebKitFormBoundaryiJpJZSxazdqa8hzb
    [HTTP_ACCEPT] => */*
    [HTTP_DNT] => 1
    [HTTP_REFERER] => http://192.168.255.128/test.html
    [HTTP_ACCEPT_ENCODING] => gzip, deflate
    [HTTP_ACCEPT_LANGUAGE] => zh-CN,zh;q=0.8,ja;q=0.6,en;q=0.4
    [PHP_SELF] => /test.php
    [REQUEST_TIME_FLOAT] => 1470377177.1168
    [REQUEST_TIME] => 1470377177
)

</code>

登入後複製

檔案成功上傳

<code>[root@localhost tmp]# ll
total 36
-rw-r--r-- 1 nginx nginx 30920 Aug  5 14:06 Screenshot_2010-01-01-08-11-30.png
-rw-r--r-- 1 nginx nginx  1705 Aug  5 14:06 tmp.log
[root@localhost tmp]# </code>

登入後複製

沒有出錯…

先來個印看看啊！先別用if判斷。直接

<code>echo 'FILES:'.var_dump($_FILES);
echo 'POST:'.var_dump($_POST);
die();</code>

登入後複製

看看是什麼東東。然後在一步一步的來

F12看請求啊

樓主用$_REQUES接收試試看。

你也可以直接傳base64編碼

打開chrome的控制台看看請求Request發送了什麼，主要看請求頭的Content-Type和請求體