从AJAX发送文件，从PHP中撤回

Question

我有一个表单，用ajax检索字段，并将这些字段作为post发送到PHP文件。但其中一个字段是input type="file"。

我的问题如下:如何通过ajax正确地将该文件(图像)发送到PHP文件并读取该文件，以便将其上传到服务器。

下面是我的代码：表单和字段

<form class="uploadForm" id="uploadForm" method="post" enctype="multipart/form-data">
                                    <div class="response" id="response"></div>
                                    <div class="custom-file">
                                        <input type="hidden"
                                               name="<?php echo ini_get("session.upload_progress.name"); ?>"
                                               value="video_upload">
                                        <input type="file" name="lien_video" class="custom-file-input" id="customFile">
                                        <label class="custom-file-label" for="customFile">Choisir le logo</label>
                                    </div>
                                    <div class='progress' id="progress_div">
                                        <div class='bar' id='bar1'></div>
                                        <div class='percent' id='percent1'>0%</div>
                                    </div>
...and some other stuffs

到目前为止，脚本与表单在同一个文件中

<script type="text/javascript">
            $(document).ready(function () {
                //upload data
                $(document).on('click', '#enreg_ecole', function () {
                    let nom_ecole = $('#input-1').val();
                    let adresse = $('#input-2').val();
                    let nom_rep = $('#input-3').val();
                    let email_rep = $('#input-4').val();
                    let tel_rep = $('#input-5').val();
                    let poste = $('#input-6').val();
                    // let logo = $('#customFile').val();
                    let logo = document.getElementById("customFile").files[0];

                    var form = new FormData();
                    form.append('enreg_ecole', 1);
                    form.append('nom_ecole', nom_ecole);
                    form.append('adresse', adresse);
                    form.append('nom_rep', nom_rep);
                    form.append('email_rep', email_rep);
                    form.append('tel_rep', tel_rep);
                    form.append('poste', poste);
                    if(logo != null){
                        form.append('logo', logo);
                    }


                    $('#scroller').animate({scrollTop: 0}, 'fast');

                    var bar = $('#bar');
                    var percent = $('#percent');

                    $.ajax({
                        url: 'methods/enregistrer_ecole.php',
                        type: 'post',
                        cache: false,
                        contentType: false,
                        processData: false,
                        data:form,
                        enctype: 'multipart/form-data',
                        dataType: 'json',
                        beforeSubmit: function () {
                            document.getElementById("progress_div").style.display = "block";
                            var percentVal = '0%';
                            bar.width(percentVal)
                            percent.html(percentVal);
                        },
                        uploadProgress: function (event, position, total, percentComplete) {
                            var percentVal = percentComplete + '%';
                            bar.width(percentVal)
                            percent.html(percentVal);
                        },
                        success: function (response) {
                            let status = response['status'];
                            let message = response['message'];

                            if (status === 'error') {
                                // window.alert(message);
                                document.getElementById("progress_div").style.display = "none";
                                document.getElementById("alert_div").style.display = "inline";
                                $('#alert_div').addClass('alert-danger');
                                $('#alert_title').html(status);
                                $('#alert_message').html(message +' ' +logo);
                            } else {
                                // window.alert(message);
                                document.getElementById("alert_div").style.display = "inline";
                                // $('#bar1').animate({width: "100%"}, 100);
                                var percentVal = '100%';
                                bar.width(percentVal)
                                percent.html(percentVal);
                                $('#alert_div').addClass('alert-success');
                                $('#alert_title').html(status);
                                $('#alert_message').html(message);
                            }
                        },
                        // complete: function (xhr) {
                        //
                        // },
                        error: function (error, ajaxOptions, thrownError) {
                            // let error = JSON.parse(response);
                            // window.alert('Error happenned: ' + error);
                            // window.alert('Error happenned: ' + response.msg);
                            // var msg = $.parseJSON(error).msg;
                            window.alert(error);
                            window.alert(ajaxOptions);
                            window.alert(thrownError);
                        }
                    });

                    //window.alert('clicked');
                });
            });
        </script>

我想要做这样的事情：

$target_file = $target_dir . basename($_FILES["lien_video"]["name"]);

--编辑----好吧，我尝试了更多的代码，看起来就像在我的PHP文件上(从ajax调用的enregistrer_ecole.php)，如果我试图从表单中检索文本，没关系。如果我只想取回文件，没关系的。但是试图同时检索文本和图片文件(比如$_POST'someText'和$_POST'someFile' )，它会抛出一个错误。

有谁知道如何正确地做到这一点吗？比如先拿到短信然后拿到文件。我不知道。

Answer 1

HTML

<div class="container">
    <form method="post" action="" enctype="multipart/form-data" id="myform">
        <div class='preview'>
            <img src="" id="img" width="100" height="100">
        </div>
        <div >
            <input type="file" id="file" name="file" />
            <input type="button" class="button" value="Upload" id="but_upload">
        </div>
    </form>
</div>

PHP

<?php

/* Getting file name */
$filename = $_FILES['file']['name'];

/* Location */
$location = "upload/".$filename;
$uploadOk = 1;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);

/* Valid Extensions */
$valid_extensions = array("jpg","jpeg","png");
/* Check file extension */
if( !in_array(strtolower($imageFileType),$valid_extensions) ) {
   $uploadOk = 0;
}

if($uploadOk == 0){
   echo 0;
}else{
   /* Upload file */
   if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
      echo $location;
   }else{
      echo 0;
   }
}

Answer 2

HTML中缺少一个表单属性，那就是容器类型。

<form class="uploadForm" id="uploadForm" method="post" enctype="multipart/form-data">
</form>

而且可以有一个改进:与其编写附加到form data对象的每个输入字段，不如编写单行。

您可以替换所有这些行

var form = new FormData();
form.append('enreg_ecole', 1);
form.append('nom_ecole', nom_ecole);
form.append('adresse', adresse);

成一行如下：

var form = new FormData($("form")[0]);