使用Ajax在Codeigniter中上传文件 [英] File upload in codeigniter using ajax

问题描述

我正在尝试在Codeigniter框架中使用Ajax上传文件.我的代码无需使用ajax就可以工作，但是当我使用ajax时，在if($ _ FILES ['picture'] ['name'])中收到错误消息'Undefined index:picture'.

I am trying to upload file using ajax in codeigniter framework. My code work without using ajax but when i use ajax i got error message '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{

   }

推荐答案

formData 的参数应为HTML < form> 元素.通过给< form> 一个id属性，最容易做到这一点.

The argument to formData should be an HTML <form> element. That is most easily done by giving the <form> an id attribute.

视图:

<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 选项可以从

In the javascript you don't show how the values for title, caption, description, and kategori are set. But they are clearly other <input> elements in the form. You probably do not need to capture these values separately because all form inputs (including FILE type inputs) are captured in var formData. That means that the ajax data option can be rewritten from

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

到

data: formData, 

if($ _ FILES ['picture'] ['name'])行现在应该可以正常工作.

The line if($_FILES['picture']['name']) should work now.

这篇关于使用Ajax在Codeigniter中上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！