使用AJAX将文件上传到PHP

时间:2017-07-25 10:00:17

标签: php html ajax form-data

我正在发送一些数据 - 包括文件到php,如果我只是通过HTML来做它并将它发布到每个工作正常,但不是在尝试使用Ajax上传它时我想知道为什么。

$scope.aceptar = function() {           
    var form = $('form');           
    var formData = new FormData(form);
    var file_1 = document.getElementById('file_1').files[0];
    var file_2 = document.getElementById('file_2').files[0];
    var file_3 = document.getElementById('file_3').files[0];

    formData.append(file_1.name, file_1);
    formData.append(file_2.name, file_2);
    formData.append(file_3.name, file_3);

    $.ajax({                    
        method: "post",
        url: "http:dsfs43r4.php",                    
        data: formData,
        processData: false,                                 
        async: false,   
        success: function(data) {           
            console.log(data);
        },       
        error: function(data) { 
            alert("error"); 
        }       
    });
 }

在php中我只回显$ _FILES但我得到了

array(0) {}

作为Chrome控制台上的答案。

修改

如果我这样做:

<form id="theForm"  enctype="multipart/form-data" action="http://ge/_m.php" method="post">      

<button type="submit" ng-click="aceptar()">Aceptar</button>  
</form>

我得到这个$ _POST - 这是我期待的:

  

array(15){     [ “卢特”] =&GT;     string(8)“tyrrtyrw”     [ “Kg__muestra”] =&GT;     string(0)“”     [ “Kg__ceb__aprovechable”] =&GT;     string(0)“”     [ “ - / 50_mm”] =&GT;     string(0)“”     [ “50 / 60_mm”] =&GT;     string(0)“”     [ “60 / 75_mm”] =&GT;     string(0)“”     [ “75 / 90_mm”] =&GT;     string(0)“”     [ “90 / + _毫米”] =&GT;     string(0)“”     [ “Kg__destrío”] =&GT;     string(0)“”     [ “Kg__podridos”] =&GT;     string(0)“”     [ “Kg__merma”] =&GT;     string(0)“”     [ “Kg__podrido_interno”] =&GT;     string(0)“”     [ “Kg__germinación_int__1/ 3”] =&GT;     string(0)“”     [ “Kg__germinación_int__2/ 3”] =&GT;     string(0)“”     [ “Cantidad_en_Kg _”] =&GT;     string(0)“”   }   Hubo un problema al subir los ficheros。

所以IDK为什么通过ajax做这件事不会给我相同的结果。

1 个答案:

答案 0 :(得分:1)

以下是我为启用AJAX表单上传所做的工作,调整它以适应它并且应该为您完成工作!我的例子中带有文件的元素是#evidence

                var jform = new FormData();
                jform.append('supply_id',supply_id);
                jform.append('fuel_usage',$('#fuel_usage').val());
                jform.append('cost',$('#cost').val());
                jform.append('currency',$('#currency').val());
                jform.append('reading',$('#reading').val());
                jform.append('data_source',$('#data_source').val());
                jform.append('date_from',$('#date_from').val());
                jform.append('date_to',$('#date_to').val());
                jform.append('evidence',$('#evidence').get(0).files[0]);
                jform.append('comments',$('#comments').val());

                $.ajax({
                    url: '/your-form-processing-page-url-here',
                    type: 'POST',
                    data: jform,
                    dataType: 'json',
                    mimeType: 'multipart/form-data',
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(data, status, jqXHR){
                        alert('Hooray! All is well.');
                        console.log(data);
                        console.log(status);
                        console.log(jqXHR);

                    },
                    error: function(jqXHR,status,error){
                        // Hopefully we should never reach here
                        console.log(jqXHR);
                        console.log(status);
                        console.log(error);
                    }
                });