使用ajax在codeigniter中上传文件答案

【问题标题】：File upload in codeigniter using ajax使用ajax在codeigniter中上传文件
【发布时间】：2017-10-02 07:58:24
【问题描述】：

我正在尝试在 codeigniter 框架中使用 ajax 上传文件。我的代码在不使用 ajax 的情况下工作，但是当我使用 ajax 时，我收到错误消息 'Undefined index: 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);
           }  
       });

控制器：

$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{

   }

【问题讨论】：

使用 ajax 发送文件与 post 方法不同
stackoverflow.com/questions/10899384/… 应该是一个很好的参考
你可以参考这里roytuts.com/ajax-file-upload-using-codeigniter-jquery

标签： php ajax codeigniter file-upload codeigniter-3

【解决方案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']) 行现在应该可以工作了。

【讨论】：

【解决方案2】：

//这样更新

var url = "";
$.ajax({ 网址：网址，数据：“标题”：标题，“标题”：标题，“描述”：描述，“类别”：类别，“图片”：图片}，数据类型：“JSON”，类型：“POST”， mimeType: "multipart/form-data", 内容类型：假，
异步：假，缓存：假，内容类型：假，处理数据：假，
成功：函数（数据）{
swal("Berhasil ditambahkan!", "Anda berhasil menambahkan porto folio.", "success") window.location.replace(data.url); }
});

【讨论】：