使用ajax在codeigniter中上传文件

时间:2022-11-24 12:16:00

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']).

我试图在codeigniter框架中使用ajax上传文件。我的代码在不使用ajax的情况下工作,但是当我使用ajax时,我收到错误消息'Undefined index:picture'in if($ _ FILES ['picture'] ['name'])。

Please check this code

请检查此代码

View :

查看:

<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 :

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

Controller :

控制器:

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

   }

2 个解决方案

#1


0  

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

formData的参数应该是HTML

元素。通过给一个id属性最容易做到这一点。

view:

视图:

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

The ajax then changes to

然后ajax改为

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

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

在javascript中,您没有显示如何设置title,caption,description和kategori的值。但它们显然是表单中的其他元素。您可能不需要单独捕获这些值,因为所有表单输入(包括FILE类型输入)都是在var formData中捕获的。这意味着可以重写ajax数据选项

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

to

data: formData, 

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

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

#2


0  

//update like this

//像这样更新

var url = "";
$.ajax({ url:url, data:"title":title,"caption":caption,"description":description,"kategori":kategori,"picture":picture}, dataType:"JSON", type:"POST", mimeType: "multipart/form-data", contentType: false,
async: false, cache: false, contentType: false, processData: false,
success:function(data){
swal("Berhasil ditambahkan!", "Anda berhasil menambahkan porto folio.", "success") window.location.replace(data.url); }
});

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,async:false,cache:false,contentType:false,processData:false,success:function(data){swal(“Berhasil ditambahkan!”,“ Anda berhasil menambahkan porto folio。“,”成功“)window.location.replace(data.url);}});

#1


0  

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

formData的参数应该是HTML

元素。通过给一个id属性最容易做到这一点。

view:

视图:

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

The ajax then changes to

然后ajax改为

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

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

在javascript中,您没有显示如何设置title,caption,description和kategori的值。但它们显然是表单中的其他元素。您可能不需要单独捕获这些值,因为所有表单输入(包括FILE类型输入)都是在var formData中捕获的。这意味着可以重写ajax数据选项

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

to

data: formData, 

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

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

#2


0  

//update like this

//像这样更新

var url = "";
$.ajax({ url:url, data:"title":title,"caption":caption,"description":description,"kategori":kategori,"picture":picture}, dataType:"JSON", type:"POST", mimeType: "multipart/form-data", contentType: false,
async: false, cache: false, contentType: false, processData: false,
success:function(data){
swal("Berhasil ditambahkan!", "Anda berhasil menambahkan porto folio.", "success") window.location.replace(data.url); }
});

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,async:false,cache:false,contentType:false,processData:false,success:function(data){swal(“Berhasil ditambahkan!”,“ Anda berhasil menambahkan porto folio。“,”成功“)window.location.replace(data.url);}});