javascript - Ajax wird mit Datei in HTML5 kombiniert, um das Hochladen von Dateien zu implementieren, und PHP wird verwendet, um es im Hintergrund zu empfangen. Wie verwende ich PHP, um die übergebenen Formulardaten zu empfangen?

Wie verwende ich PHP, um vom Frontend übertragene Dateien zu empfangen? Welche Art von Binärdaten enthält die Datei des Formdata-Objekts?
Frontend-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>

Ich weiß nicht, warum das Urteil von if(!empty($_FILES['file'])) immer falsch ist und das Gleiche gilt, wenn if(!empty($_POST['file']) verwendet wird. ); Weiß jemand, wie der Hintergrund funktioniert? Nehmen Sie eingehende Dokumente an? Können Sie mir eine Demo-PHP-Datei geben!

Antwortinhalt:

Wie verwende ich PHP, um vom Frontend übertragene Dateien zu empfangen? Welche Art von Binärdaten enthält die Datei des Formdata-Objekts?
Frontend-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>

Ich weiß nicht, warum die Beurteilung von if(!empty($_FILES['file'])) immer falsch ist und das Gleiche gilt, wenn if(!empty($_POST['file']) verwendet wird. ); Weiß jemand, wie der Hintergrund funktioniert? Akzeptieren Sie eingehende Dokumente? Können Sie mir eine Demo-PHP-Datei geben?

Ich habe 3 Protokolldatensätze in PHP hinzugefügt:

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

Der Speicherpfad wurde in tmp geändert, aber sonst hat sich nichts geändert. Das Ergebnis ist:

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

Datei erfolgreich hochgeladen

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

Nichts ist schiefgelaufen...

Lass es uns zuerst ausdrucken! Verwenden Sie if noch nicht zur Beurteilung. Direkt

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

Schauen Sie, was es ist. Dann machen Sie es Schritt für Schritt

F12, um die Anfrage anzuzeigen

Das Originalplakat kann mit $_REQUES empfangen werden.

Sie können den base64Code

auch direkt hochladen

Öffnen Sie die Chrome-Konsole, um zu sehen, was die Anfrage gesendet hat, und sehen Sie sich dabei hauptsächlich den Inhaltstyp des Anfrageheaders und des Anfragetextes an