使用Ajax在Codeigniter中上传文件

问题描述：

我正在尝试在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中上传文件

相关推荐