javascript - Ajax는 html5의 파일과 결합되어 파일 업로드를 구현하고 PHP를 사용하여 백그라운드에서 이를 수신합니다. PHP를 사용하여 전달된 formData를 수신하는 방법은 무엇입니까?

프런트엔드에서 전송된 파일을 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']))의 판단이 왜 항상 거짓인지 모르겠고, if(!empty($_POST['file'])를 사용할 때도 마찬가지입니다. ); 배경이 어떻게 작동하는지 아는 사람이 있나요? 데모 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>

if(!empty($_FILES['file']))의 판단이 왜 항상 거짓인지 모르겠고, if(!empty($_POST['file'])를 사용할 때도 마찬가지입니다. ); 배경이 어떻게 작동하는지 아는 사람이 있나요? 데모 PHP 파일을 주실 수 있나요?

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 콘솔을 열어 요청이 보낸 내용을 확인합니다. 주로 요청 헤더와 요청 본문의 Content-Type을 살펴봅니다.