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

时间:2016-07-18 00:41:43

标签: javascript php jquery html ajax

我正在尝试更新我的数据库中的图像。我有一个加载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>
&#13;
&#13;
&#13;

这是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);
}

enter image description here

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

&#13;
&#13;
        $('#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 () {

                    });



        });
&#13;
&#13;
&#13;

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

 processData: false,
  contentType: false

这样,它解决了我的问题。

2 个答案:

答案 0 :(得分:1)

使用FormData代替$(this).serialize();,将processDatacontentType设为false

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

答案 1 :(得分:0)

请尝试使用Public Class Form1 Private WithEvents DataGridView1 As DataGridView Private WithEvents TextBox1 As TextBox Private WithEvents TabPage2 As TabPage Sub New() ' This call is required by the designer. InitializeComponent() ' Add any initialization after the InitializeComponent() call. 'Add controls to the form (usually I use the designer to do this) Dim TabPage1 As New TabPage() With {.Name = "TabPage1", .Text = "TabPage1"} TabPage2 = New TabPage() With {.Name = "TabPage2", .Text = "TabPage2"} DataGridView1 = New DataGridView With {.Name = "DataGridView1", .SelectionMode = DataGridViewSelectionMode.FullRowSelect, .MultiSelect = False, .ReadOnly = True, .AllowUserToAddRows = False, .Size = New Size(TabPage1.Size.Width, TabPage2.Size.Height - 40), .Anchor = AnchorStyles.Left Or AnchorStyles.Right Or AnchorStyles.Top Or AnchorStyles.Bottom, .TabIndex = 1} TextBox1 = New TextBox With {.Name = "TextBox1", .Top = DataGridView1.Bottom + 5, .Width = DataGridView1.Width, .Visible = True, .Anchor = AnchorStyles.Left Or AnchorStyles.Right Or AnchorStyles.Bottom, .TabIndex = 0} TabPage2.Controls.Add(TextBox1) TabPage2.Controls.Add(DataGridView1) Dim TabControl1 As New TabControl() With {.Name = "TabControl1"} TabControl1.TabPages.Add(TabPage1) TabControl1.TabPages.Add(TabPage2) TabControl1.Size = Me.ClientRectangle.Size TabControl1.Anchor = AnchorStyles.Left Or AnchorStyles.Right Or AnchorStyles.Top Or AnchorStyles.Bottom Me.Controls.Add(TabControl1) End Sub Private Sub DataGridView1_RowEnter(sender As Object, e As DataGridViewCellEventArgs) Handles DataGridView1.RowEnter 'I would like the textbox to fill ONLY after the user has selected a row in DataGridView1. 'The problem I am having is that the first row auto-selects once I enter the tab Dim drw As DataRow = DirectCast(DataGridView1.Rows(e.RowIndex).DataBoundItem, DataRowView).Row TextBox1.Text = CStr(drw(1)) End Sub Private Sub TabPage2_Enter(sender As Object, e As EventArgs) Handles TabPage2.Enter RefreshGrid() 'Refresh the data in the list End Sub Sub RefreshGrid() 'simulate a database query DataGridView1.DataSource = Nothing Dim dtb As New DataTable dtb.Columns.Add("C1") dtb.Columns.Add("C2") dtb.Rows.Add("1", "One") dtb.Rows.Add("2", "Two") dtb.Rows.Add("3", "Three") dtb.Rows.Add("4", "Four") dtb.Rows.Add("5", "Five") DataGridView1.DataSource = dtb End Sub End Class 获取上传内容。