javascript - Ajax is combined with file in html5 to implement file upload, and PHP is used to receive it in the background. How to use PHP to receive the passed formData?

How to use PHP to receive files transmitted from the front end? What type of binary data does the file of the formdata object contain?
Front-end code:

<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:

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

I don’t know why the judgment of if(!empty($_FILES['file'])) is always false, and the same is true when using if(!empty($_POST['file'])); Does anyone know how the background receives the transmission? Did you get the documents? Can you give me a demo PHP file?

Reply content:

How to use PHP to receive files transmitted from the front end? What type of binary data does the file of the formdata object contain?
Front-end code:

<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:

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

I don’t know why the judgment of if(!empty($_FILES['file'])) is always false, and the same is true when using if(!empty($_POST['file'])); Does anyone know how the background receives the transmission? Did you get the documents? Can you give me a demo PHP file?

I added 3 log records in php:

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

The storage path has been changed to tmp, but other things have not changed. The result is:

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

File uploaded successfully

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

Nothing wrong...

Let’s print it out first! Don’t judge with if yet. Direct

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

Look what it is. Then do it step by step

F12 to see the request

The poster uses $_REQUES to receive it and try it.

You can also directly upload base64encoding

Open the chrome console to see what the request sent, mainly look at the Content-Type of the request header and the request body