javascript - 图像输入不会显示在 $_FILES 中

Question

我正在尝试更新数据库中的图像。我有一个加载了 jquery 的模态。当点击保存修改按钮时，除了图像文件之外，所有表单数据都会显示，而图像文件不会显示在 php 的 $_FILES 中。我尝试了在网上找到的所有指示(php ini 文件允许文件上传，图像大小很好)。如果我使用经典的提交方法，代码就可以工作，但我不想全屏刷新，我需要在 ajax 中完成这一切。这是 HTML:

        $('#updatePubDevFrm').submit(function (e) {
            e.preventDefault();

 
            var data = $(this).serialize();
            alert(data);
            var url = '/PubDev/updatePubDev';
            $.post(url, data, null, 'json')
                    .done(function (data) {
                        if (data.status === "OK") {


                            $('#updatePubDevModal').removeClass('md-show');

                        } else {
                            alert("update error");
                        }
                    })
                    .fail(function (data) {
                        alert("ajax error");
                    })
                    .always(function () {

                    });



        });

<div class="md-modal md-effect-1" id="updatePubDevModal" >
    <div class="md-content">
        <div class="modal-header">
            <button class="md-close close">&times;</button>
            <h4 class="modal-title">Update Publisher/Developer</h4>
        </div>
        <form id="updatePubDevFrm" class="dz-clickable dropzone" action="/PubDev/updatePubDev" method="post" enctype="multipart/form-data">
           
            <div class="modal-body">
                <div class="row dropzone">
                    <div class="col-lg-5">
                        <div class="form-group">
                            <label for="pubDevName">System Id of Publisher/Developer</label>
                            <input type="text" placeholder="Name of Publisher/Developer" name="pubDevIdDisplay" id="pubDevIdDisplay" class="form-control input-large" disabled="true">
                            <input type="hidden"  name="pubDevId" id="pubDevId" >
                        </div>
                        <div class="form-group">
                            <label for="pubDevName">Name of Publisher/Developer</label>
                            <input type="text" placeholder="Name of Publisher/Developer" name="pubDevName-update" id="pubDevName-update" class="form-control input-large">
                        </div>
                        <div class="form-group">
                            <label for="date-founded">Date Founded</label>
                            <input type="text" placeholder="Date founded" id="date-founded-update" name="date-founded-update" class="form-control date-picker input-large">
                        </div>
                        <div class="form-group">
                            <label>What type of company is this?</label>
                            <div class="checkbox-nice">
                                <input type="checkbox" name="isPub-update" id="isPub-update">
                                <label for="date-founded-update">
                                    This company is a publisher
                                </label>
                            </div>
                            <div class="checkbox-nice">
                                <input type="checkbox" name="isDev-update" id="isDev-update">
                                <label for="isDev-update">
                                    This company is a developer
                                </label>
                            </div>
                        </div>



                    </div>
                    <div class="col-lg-7">
                        <div class="main-box clearfix main-box-frame" >
                            <header class="main-box-header clearfix">
                                <h2>Upload Publisher /Developer Logo</h2>
                            </header>

                            <div class="main-box-body clearfix imgcontainer center">
                                <img id="preview" src="" class="pointable" alt="No Image Available" style="max-height:100%; max-width: 100%; "/>
                                <div class="main-box-body clearfix">
                                    <div id="dropzone" class="drop-zone-frame" >

                                        <input type="file" name="image2" id="image2">


                                    </div>
                                </div>
                            </div>

                        </div>


                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="submit" id="confirmUpdPubdev" class="btn btn-primary">Save Modifications.</button>
            </div>
            
            
        </form>


    </div>
</div>

这是 PHP 代码:

public function updatePubDev() {

    $fields = array();

    $fields[$this->pubdev->get_id_name()] = $this->input->post('pubDevId');
    $fields['name'] = $this->input->post('pubDevName-update');
    if ($this->input->post('date-founded'))
        $fields['date_founded'] = stampa_data_formato_DATE($this->input->post('date-founded-update'), '/');
    if ($this->input->post('isPub-update'))
        $fields['publisher'] = 1;
    else
        $fields['publisher'] = 0;

    if ($this->input->post('isDev-update'))
        $fields['developer'] = 1;
    else
        $fields['developer'] = 0;


    $row_count = $this->pubdev->update($fields,$this->pubdev->get_id_name());

    $file = $_FILES['image2'];

    //$idPubDev = $this->input->post("pubDevName");
    $ds = DIRECTORY_SEPARATOR;
    $path = dirname('../') . $ds . 'application' . $ds . 'assets' . $ds . 'img' . $ds . 'pub_devs' . $ds . 'logos' . $ds;
    //print_r($file);
    $info = new SplFileInfo($file['name']);
    //var_dump($info->getExtension());
    $filename = "logo_id_" . str_pad( $this->input->post('pubDevId'), 11, "0", STR_PAD_LEFT) . "." . $info->getExtension();
    $result = $this->upload->uploadfile($file, $path, $filename);
    //echo "test";
    if ($result['status'] === "OK") {
        $logo = 'logo_id_' . str_pad($this->input->post('pubDevId'), 11, "0", STR_PAD_LEFT) . '.' . $info->getExtension();
        $this->pubdev->update(array('logo' => $logo, $this->pubdev->get_id_name() => $this->input->post('pubDevId')), $this->pubdev->get_id_name());
        $result['message'] = "file saved successfully";
        $result['query'] = $this->db->last_query();
    }

    $result['update_rows']= $row_count;
    echo json_encode($result);
}

我尝试了.ajax版本，但问题仍然存在，这里是修改后的jquery:

        $('#updatePubDevFrm').submit(function (e) {
            e.preventDefault();


            var data = $(this).serialize();

            var url = '/PubDev/updatePubDev';

            $.ajax({
                url: url,
                type: "POST",
                data: data,
                processData: false,
                contentType: false
            })

                    .done(function (data) {
                        if (data.status === "OK") {


                            $('#updatePubDevModal').removeClass('md-show');

                        } else {
                            alert("update error!");
                        }
                    })
                    .fail(function (data) {
                        alert("ajax error!");
                    })
                    .always(function () {

                    });



        });

这不是一个重复的问题，因为答案提供了上传图像和数据输入所需的不同属性。 $.ajax 调用中需要这两个属性:

 processData: false,
  contentType: false

这样就解决了我的问题。

Answer 1

使用FormData作为数据而不是$(this).serialize();，设置processData和contentType 到假

   var data = new FormData();
   data.append("file", $(":file", this)[0].files[0]);
   $.ajax({
     url: "/PubDev/updatePubDev",
     type: "POST",
     data: data,
     processData: false,
     contentType: false
   })