codeIgniter，jQuery的阿贾克斯，表单提交和文件上传 [英] CodeIgniter, Jquery Ajax, Form Submission and File Upload

问题描述

我的网站上使用codeIgnitor框架的工作。

I am working on a website using CodeIgnitor Framework.

问题与codeIgniter相关，jQuery的阿贾克斯，表单提交和文件上传

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

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

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.

推荐答案

我在用JS的FORMDATA对象codeigniter类似的功能

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

参考链接：<一href="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

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


}

这篇关于codeIgniter，jQuery的阿贾克斯，表单提交和文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！