如何獲得FORMDATA和數據參數form.serialize關於Ajax的jQuery

Question

我有一個表格上傳大量的信息和文件上傳multiupload像這樣：

<div class="col-md-4"> 
<div class="form-group"> 
    <label class="control-label col-md-3">Location</label> 
    <div class="col-md-9"> 
     <?php 
     $location = array(
      "type" => "text", 
      "name" => "location", 
      "id" => "location", 
      "class" => "form-control" 
     ); 
     echo form_input($location); 
     ?> 
     <span class="help-block"></span> 
    </div> 
</div> 
</div> 

<div class="col-md-12"> 
    <div class="form-group"> 
    <label class="control-label col-md-2">Warehouse</label> 
    <div class="col-md-10"> 
     <?php 
     foreach ($tipe as $v): 
      echo "<label class='checkbox-inline'><input type='checkbox' name='tipe[]' value='$v->ID_CHECK_LIST'>$v->NAMA_CHECK_LIST</label>"; 
     endforeach; 
     ?> 
     <p class="help-block"></p> 
    </div> 
    </div> 
</div> 

<div class="col-md-12"> 
    <div class="form-group"> 
    <label class="control-label col-md-2">Image If Damage</label> 
    <div class="col-md-4"> 
     <input type="file" multiple="" name="images[]"> 
     <p class="help-block"></p> 
    </div> 
    </div> 

現在，我需要使用ajax發送它們。我已經嘗試$（form）.serialized（），但$ _FILES是空的，所以我使用FormData類。但FormData只是處理文件，而不是另一個輸入。我如何設置aja參數中的數據來處理文件和其他輸入。

這是AJAX的jQuery

$('#form').submit(function() {    
     $('#btnSave').text('saving...'); //change button text 
     $('#btnSave').attr('disabled', true); //set button disable 

     var url; 
     var formData = new FormData(this); 

     if (save_method === 'add') { 
      url = "<?php echo site_url('members/it/Request/ajax_add') ?>"; 
     } else { 
      url = "<?php echo site_url('members/megumi/cek_list_wire_rod/ajax_update') ?>"; 
     } 

     // ajax adding data to database 

     $.ajax({ 
      url: url, 
      type: "POST", 
      data: formData, 
       processData: false, 
       contentType: false, 
       $('#form').serialize(), 
      dataType: "JSON", 
      success: function (data) 
      { 

       if (data.status) //if success close modal and reload ajax table 
       { 
        $('#modal_form').modal('hide'); 
        reload_table(); 
       } else 
       { 
        for (var i = 0; i < data.inputerror.length; i++) 
        { 
         $('[name="' + data.inputerror[i] + '"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class 
         $('[name="' + data.inputerror[i] + '"]').next().text(data.error_string[i]); //select span help-block class set text error string 
        } 
       } 
       $('#btnSave').text('Save'); //change button text 
       $('#btnSave').attr('disabled', false); //set button enable 
      }, 
      error: function (jqXHR, textStatus, errorThrown) 
      { 
       alert('Error adding/update data'); 
       $('#btnSave').text('save'); //change button text 
       $('#btnSave').attr('disabled', false); //set button enable 

      } 
     }); 
     return false; 
    }); 

任何幫助它如此讚賞。

Answer 1

對於您需要發送的所有數據，使用FormData，因爲PHP支持multipart/form-data以及application/x-www-form-urlencoded。您可以將key: value對添加到FormData，它們將顯示爲正常$_POST變量，但您添加的文件將在$_FILES中。

例子：

var fd = new FormData(); 
fd.append('file1', file1); 
fd.append('file2', file2, 'newFile2Name.pdf'); 
fd.append('username', 'password'); 
fd.append('file_id', file_id); 

$.ajax({ 
    url: url, 
    type: "POST", 
    data: fd, 
    processData: false, 
    contentType: false, 
    success: function(response) {}, 
    error: function(xhr, textStatus, errorThrown) {}, 
    complete: function() {} 
}); 

注意，沒有dataType財產。你的$('#form').serialize()隨機代碼需要被刪除，因爲它是無效的語法（你不能把表達式放入對象文字表達式中）。

在PHP：

<?php 

$_FILES['file1']['name'] === 'file1.pdf'; 
$_FILES['file2']['name'] === 'newFile2Name.pdf'; 

$_POST['username'] === "password" 
$_POST['file_id'] === "4" 

?>