CodeIgniter 3.0でAJAXを使ってファイルをアップロードするには？

Question

私はテキストボックスとファイルアップロードのフォームを持っています。ユーザーがボタンをクリックしたとき。 テキストボックス値およびファイルアップロード名がデータベースに保存され、ファイルがサーバーにアップロードされます。私はAJAXを使ってそれを経験したことはありません。だから、どんな助けも大歓迎です。これは私のAJAXある

<form enctype="multipart/form-data" accept-charset="utf-8" name="f_complaint" id="f_complaint"> 
    <input type="text" name="i_complaint" id="id_complaint" class="cl_complaint" /> 
    <input type="file" name="i_file" id="id_file" class="cl_file" /> 
    <input type="button" id="btn_upl" value="Save your complaint" class="btn btn-primary" /> 
</form> 

：

は、これが私のフォームです

<script src="<?php echo base_url('assets/inspinia/js/jquery-2.1.1.js'); ?>"></script> 
<script src="<?php echo base_url('assets/jquery-ui/jquery-ui.js'); ?>"></script>  
<script type="text/javascript"> 
$(document).ready(function() { 
    var url = "<?php print base_url(); ?>complaint/saveadd"; 
    $('#btn_upl').on('click', function() { 
     var formData = new FormData($(this).parent('form')[0]); 
     //alert(url); 

     $.ajax({ 
      url : url, 
      type  : 'POST', 
      data  : formData, 
      success : function (returndata) { 
       alert(returndata); 
      } 
     }); 
    }); 
}); 
</script> 

これは私のコントローラである：

public function saveadd() { 
    $config['upload_path']  = FCPATH."assets/uploads/"; 
    $config['max_size']   = '307200'; 
    $config['file_name']   = "FILE - ".$_FILES['i_file']['name'];; 
    $config['overwrite']  = TRUE; 
    $this->load->library('upload', $config); 
    $this->upload->initialize($config); 
    if (! $this->upload->do_upload('i_file')) { 
     //return false; 
     redirect('app/'); 
    } else { 
     redirect('complaint/add'); 
    } 
} 

コードで何が悪いのでしょうか？アラートでさえ発砲されません。プラグインを使用したくありません

Answer 1

コードの何が問題なのですか？アラートでさえ発砲されません。

ここに何が間違っていますか。 1.あなたのアラートはAJAX成功時に呼び出されます。これは、ajaxコールが正常に完了したことを意味します。しかし、あなたのCIコントローラでは、AJAX呼び出しをリダイレクトしているので、AJAX呼び出しは決して完了せず、決して "success function（returndata）："ブロックに戻りません。

今、これを解決するには、以下のコードを置き換えてください。

//return false; 
    redirect('app/'); replace with, 
    echo "upload failed";exit; 

と

redirect('complaint/add'); replace with 
echo "upload finished";exit; 

この戻り値は "returndata" jsの変数に返されます。

Answer 2

私はあなたがこのライブラリを使用することをお勧め：https://blueimp.github.io/jQuery-File-Upload/basic.html

とWikiライブラリーでは、CodeIgniterのための命令です：https://github.com/blueimp/jQuery-File-Upload/wiki CTRL + F - > CodeIgniterの

常に私はそれを使用すると、それは非常によく動作します:)

Answer 3

ajaxとcodeigniterを使ったアップロードファイルの参考です。私はそれがajaxを使用してファイルをアップロードする最良の方法です。

https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684