Javaスクリプト送信ボタンを使用してファイルを持つフォームを送信する

Question

java-script： 私は、ajax呼び出しによってコントローラに値を送るフォームを持っています。 フォームは、ajax呼び出しでシリアル化され、コントローラは成功すると 'true'を返しますが、問題はフォームにファイルがあり、ファイルをシリアル化できないことです。私はこのAJAX呼び出しを使用して私のコントローラーでファイルを受け取ることができます。

function save() 
{  
if(save_method == 'On_submitted') 
    { 
      url = "<?php echo site_url('MyController/insertForm')?>"; 
      $.ajax({ 
       url : url, 
       type: "POST", 
       data:$('#form_name').serialize(), 
       dataType: "JSON", 
       success: function(data) 
       { 

        if(data.status) //if success close modal and reload ajax table 
        { 
         $('#modal_name').modal('hide'); 
         alert('added successfully'); 
         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 

       } 
      }); 

    } 
} 

入力ファイルのフィールドを省略した場合、主な問題はファイルをjava-script経由でコントローラに送信することです。 私は試しましたが、何が間違っているのか分からず、どうすればいいのですか。

Answer 1

ファイルを送信する場合は、dataType: "JSON"を使用しないでください。

あなたは（フォームのfilesForm =名前）を使用して、要求のためのdataを形成することができます、このデータを送信するために

formData.append("key", keyValue); 

とAJAX呼び出しにこのオプションを追加：

は

var formData = new FormData(document.forms.filesForm); 

その後、他のキーを追加します：

contentType: false, 
cache: false, 
processData: false, 

あなたはcontentType = falseが必要です（これはfのmultipart/form-dataになります）。あなたがファイルをアップロードしたい場合は、

$.ajax({ 
    url: url, 
    data: formData, 
    contentType: false, 
    cache: false, 
    processData: false, 
    type: 'POST', 
    success: function (result) { 
     $("#result").html(result) 
    }, 
    error: function (result) { 
     $("#result").html(result) 
    } 
});