jquery - CodeIgniter、Jquery Ajax、表单提交和文件上传

Question

我正在使用 CodeIgnitor 框架开发一个网站。

问题与CodeIgniter、Jquery Ajax、表单提交和文件上传相关

我的 HTML 是:仅给出下面 HTML 的相关部分

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

我的 JQUERY 代码是

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

如何将输入类型文件数据传递到我的 Controller ？

我尝试了各种方法，但没有任何效果。

Answer 1

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

引用链接:https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects#Sending_files_using_a_FormData_object

示例代码:

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


}