ajaxを使用してcodeigniterでファイルをアップロード

Question

codeigniterフレームワークでajaxを使用してファイルをアップロードしようとしています。私のコードはajaxを使用せずに動作しますが、私はajaxを使用するときにエラーメッセージ '未定義インデックス：picture'in if（$ _ FILES [' picture '] [' name ']）を得ました。

このコードを確認してください

ビュー：

<form enctype="multipart/form-data" method="post"> 
    <div class="form-group"> 
     <label for="int">Picture</label> 
     <input type="file" id="picture" name="picture" class="dropify" data-height="300" /> 
    </div> 
</form> 

AJAX：

var picture=new FormData($("#picture")[0]); 
var url = "<?php echo site_url('Workscontroller/create_action'); ?>"; 
      $.ajax({ 
       url:url, 
       data: {"title":title,"caption":caption,"description":description,"kategori":kategori,"picture":picture}, 
       dataType:"JSON", 
       type:"POST", 
       mimeType: "multipart/form-data", 
       contentType: false, 
       cache: false, 
       processData:false, 
       success:function(data){ 
       swal("Berhasil ditambahkan!", "Anda berhasil menambahkan porto folio.", "success") 
       window.location.replace(data.url); 
      } 
     }); 

コントローラー：formDataへ

$this->load->library('upload'); 
    $this->_rules(); 
    $nmfile = "file_".time(); //nama file saya beri nama langsung dan diikuti fungsi time 
    $config['upload_path'] = './works/'; //path folder 
    $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan 
    $config['max_size'] = '2048'; //maksimum besar file 2M 
    $config['max_width'] = '2000'; //lebar maksimum 1288 px 
    $config['max_height'] = '2000'; //tinggi maksimu 768 px 
    $config['file_name'] = $nmfile; //nama yang terupload nantinya 
    $this->upload->initialize($config); 
    if($_FILES['picture']['name']) 
    { 
     if ($this->upload->do_upload('picture')) 
     { 
      $gbr = $this->upload->data(); 
      $data = array(
       'title' => $this->input->post('title',TRUE), 
       'caption' => $this->input->post('caption',TRUE), 
       'description' => $this->input->post('description',TRUE), 
       'picture' => $gbr['file_name'], 
       'kategori' => $this->input->post('kategori',TRUE), 
      ); 
      $this->WorksModel->insert($data); 
     } 
    } 
    else{ 

    } 

Answer 1

引数は、HTMLでなければなりません要素。これは、<form>にid属性を与えることで最も簡単に実行できます。

ビュー：

<form enctype="multipart/form-data" method="post" id='myForm'> 

アヤックスは、あなたがtitle、caption、descriptionについてどのような値を示していない、とkategoriが設定されているJavaScriptで

var formData = new FormData($("#myForm")[0]); 

に変わります。しかし、明らかにフォーム内の他の<input>要素です。すべてのフォーム入力（FILEタイプの入力を含む）はvar formDataに取り込まれるので、おそらくこれらの値を別々に取得する必要はありません。それは、Ajax dataオプションが動作するようになりました

data: formData, 

に

data: {"title":title,"caption":caption,"description":description,"kategori":kategori,"picture":picture}, 

からラインif($_FILES['picture']['name'])を書き換えることができることを意味します。

Answer 2

この

のvar URLなどの

//更新= ""; $ .ajax（{ url：data： "title"：タイトル、 "キャプション"：キャプション、 "description"：説明、 "kategori"：kategori、 "picture"：picture}、 dataType： JSON」、 タイプ： "POST"、 MIMEタイプ： "マルチパート/フォームのデータ"、 のcontentType：偽、
非同期：偽、 キャッシュ：偽、 のcontentType：偽、 PROCESSDATA：偽、
成功：function（data）{
swal（ "Berhasil ditambahkan！"、 "Anda berhasil menambahkan porto folio。"、 "成功"） window.location .replace（data.url）; }
}）;