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?-PHP Tutorial-php.cn

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?

WBOY

Release： 2016-08-08 09:06:53

Original

2275 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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