使用Ajax在Codeigniter中上傳文件

Question

我正在嘗試在Codeigniter框架中使用Ajax上傳文件。 我的代碼無需使用ajax就可以工作，但是當我使用ajax時，在if（$ _ FILES ['picture'] ['name']）中收到錯誤消息'Undefined index：picture'。

請檢查此代碼

查看：

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

控制器：

$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

formData的參數應為HTML <form>元素。 通過給<form>一個id屬性可以很容易地做到這一點。

視圖：

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

然后，ajax更改為

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

在javascript中，您不會顯示title ， caption ， description和kategori的值是如何設置的。 但是它們顯然是表單中的其他<input>元素。 您可能不需要分別捕獲這些值，因為所有表單輸入（包括FILE類型的輸入）都在var formData中捕獲。 這意味着可以從以下位置重寫ajax data選項：

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

至

data: formData, 

if($_FILES['picture']['name'])現在應該可以工作。

Answer 2

//像這樣更新

var url =“”;
$ .ajax（{url：url，data：“ title”：title，“ caption”：caption，“ description”：description，“ kategori”：kategori，“ picture”：picture}，dataType：“ JSON”，類型： “ POST”，mimeType：“ multipart / form-data”，contentType：false，
異步：假，緩存：假，內容類型：假，過程數據：假，
成功：功能（數據）{
swal（“ Berhasil ditambahkan！”，“ Anda berhasil menambahkan porto folio。”，“ success”）window.location.replace（data.url）; }
}）;