CodeIgniter，Jquery Ajax，表单提交和文件上传

I am working on a website using CodeIgnitor Framework.

我正在使用CodeIgnitor Framework在一个网站上工作。

Question is related with CodeIgniter, Jquery Ajax, Form Submission and File Upload

问题与CodeIgniter，Jquery Ajax，表单提交和文件上载有关

MY HTML is : Given only relevant section of HTML below

  <form method="post" action="" id="upload_file" enctype="multipart/form-data">
  <div id="inner2" style="display:none">
    <div class="trainingcontent" style="height:400px;">
      <div class="chaptername" >
        <p>Chapter Name</p>
        <input type="text" id="cname" name="cname" class="awesome-text-box" />
        <input type="hidden" id="training_id" name="training_id" />
      </div>
      <div class="trainingurl">
        <p>Training Video</p>
        <input type="text" id="video_url" name="video_url" class="awesome-text-box" placeholder="Paste your video URL here..."/>
      </div>
      <div class="uploadpdf">
        <p>Upload PDF</p>
        <a href="#"><div class="uploadbutton">
          <div class="uploadtext"> <input type="file" name="userfile" id="userfile" size="20" />UPLOAD PDF </div>
        </div></a>
      </div>
</form>

MY JQUERY CODE is

function abc(){

var training_id = $('#training_id').attr('value');
var cname = $('#cname').attr('value');
var video_url = $('#video_url').attr('value');

$.ajax({  
    type: "POST",  
    url: "../chapters/create",  
    data: "training_id="+training_id+"&cname="+cname+"&video_url="+video_url,
    success: function(returned_html){
        echo returned_html;
    }
});

}//end of function abc

How do I pass input type file data to my controller?

如何将输入类型文件数据传递给控制器？

I have tried various approaches but nothing works.

我尝试了各种方法，但没有任何作用。

1 个解决方案

#1

I created similar functionality using JS's formData object in codeigniter

我在codeigniter中使用JS的formData对象创建了类似的功能

Reference link: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects#Sending_files_using_a_FormData_object

参考链接：https：//developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects#Sending_files_using_a_FormData_object

Sample code:

示例代码：

function abc(){
   // create a FormData Object using your form dom element
   var form = new FormData(document.getElementById('upload_file'));
   //append files
   var file = document.getElementById('userfile').files[0];
    if (file) {   
        form.append('userfile', file);
    }
    //call ajax 
      $.ajax({
        url: "../chapters/create",
        type: 'POST',
        data: form,             
        cache: false,
        contentType: false, //must, tell jQuery not to process the data
        processData: false, //must, tell jQuery not to set contentType
        success: function(data) {
            console.log(data);
        },
        complete: function(XMLHttpRequest) {
            var data = XMLHttpRequest.responseText;
            console.log(data);
        },
        error: function() {
            alert("ERROR");
        }
    }).done(function() { 
        console.log('Done');

    }).fail(function() {       
        alert("fail!");
    });


}

#1