在Codeigniter中使用Ajax上传文件

时间:2016-01-27 11:25:35

标签: javascript php jquery ajax codeigniter

我正在尝试上传包含其他一些数据的文件。问题是我收到的错误你没有选择要上传的文件。我无法理解我做错了什么。如果有人能指出我做错了什么,我会很高兴。谢谢

html文件

INT_MAX

JS

 <div class="modal-body">
          <form id="add_message" enctype="multipart/form-data"  method="post" action="<?php echo base_url() ?>apps/messages/composeMessage">

            <div class="form-group">
              <select id="messageTo" class="form-control" data-plugin="select2" multiple="multiple" data-placeholder="To:" name="messageTo">
              </select>
            </div>

            <div class="form-group">
              <input class="form-control" placeholder="Subject" id="messageSubject" name="messageSubject"></input>
            </div>

            <div class="form-group">
              <textarea  data-provide="markdown" data-iconlibrary="fa" rows="10" id="messageBody" name="messageBody"></textarea>
            </div>

            <input type="hidden" name="fname" value="" id="formName" ></input>

            <div class="left">

                <!-- <span class="btn green fileinput-button"> -->

                    <input id="message_attachement" type="file" name="file_attac" size="20" >
                <!-- </span> -->
            </div>
            <!-- <button class="btn btn-primary"  type="submit" value="submit">Send</button> -->
          </form>
        </div>
        <div class="modal-footer text-left">
          <button class="btn btn-primary" data-dismiss="modal"  id="addformButton">Send</button>
          <button class="btn btn-primary" data-dismiss="modal"  id="saveformButton">Save</button>
          <a class="btn btn-sm btn-white btn-pure" data-dismiss="modal" href="javascript:void(0)">Cancel</a>
        </div>

控制器

$("#addformButton").on('click' , function(){
    debugger;       
        $.ajax({
            type: "POST", 
            url: base_url + "apps/messages/composeMessage",
            async: false,
             mimeType: "multipart/form-data",
            dataType:JSON, 
            data:{
                'reciever': $('#messageTo').val() , 
                'subject': $('#messageSubject').val(),
                'text': $('#messageBody').val(),
                'type': 'active',
                'msgId': $('#formName').val(),
                'attachment' : $('#message_attachement').val()
            },
            success: function(response){
            },
            error: function(response){
            }
        });
    });

文件上传功能

 $this->load->helper('file_upload');
         $filename = $this->input->post('attachment');
          $path = 'uploads/attachments/';
          $allowed_types = 'erb|php|txt';
          $redirect = '';
          // error_log("outside");
          if (!empty($this->input->post('attachment'))) {
              // error_log("inside");
              // error_log ("Parameters: " . $path." Types: ". $allowed_types." name: ". $filename." redirect: ". $redirect);
              $parameters['profile_pic'] = file_upload($path, $allowed_types, $filename, $redirect);
              // error_log("The path is ");
              // error_log($parameters['profile_pic']);
              if ($this->session->set_userdata("img_errors")) {
                // error_log("error");
                return false;
              }
          }

2 个答案:

答案 0 :(得分:1)

这是我在最近的项目中使用的工作代码,代码是自我解释的,但随时可以提出任何问题。

<强> HTML

                <form action="http://localhost/index.php/upload_file" method="post" style="display:none;" id="file_upload_form" enctype="multipart/form-data">
                    <input type="file" id="dialog_triggerer" name="uploaded_file">
                </form>

                <button class="btn btn-default btn-fab-sm" id="file_attach">
                    <span class="mdi-file-attachment"></span>
                </button>

<强> JS

在某些操作上触发此代码:

            var form = $('form')[0]; // standard javascript object here
            var formData = new FormData(form);

            if($("#dialog_triggerer").val()!=""){

                $.ajax( {
                  url: FRONTEND_URL + '/upload_file',
                  type: 'POST',
                  data: formData,
                  processData: false,
                  contentType: false,
                  async: false
                } ).done(function(data){
                    file_data = JSON.parse(data);
                    new_post.file_data = file_data;
                }); 

            }

upload_file ctrl:

<?php

class Upload_file extends CI_Controller{
    public function __construct(){
        parent::__construct();
    }

    public function index(){

        $valid_file=true;
        $message;


        //if they DID upload a file...
        if($_FILES['uploaded_file']['name'])
        {
            //if no errors...
            if(!$_FILES['uploaded_file']['error'])
            {
                //now is the time to modify the future file name and validate the file
                $new_file_name = strtolower($_FILES['uploaded_file']['name']); //rename file
                if($_FILES['uploaded_file']['size'] > (20024000)) //can't be larger than 20 MB
                {
                    $valid_file = false;
                    $message = 'Oops!  Your file\'s size is to large.';
                }

                //if the file has passed the test
                if($valid_file)
                {
                    $file_path = 'themes/uploads/'.$new_file_name;
                    move_uploaded_file($_FILES['uploaded_file']['tmp_name'], FCPATH . $file_path);
                    $message = 'Congratulations!  Your file was accepted.';
                }
            }
            //if there is an error...
            else
            {
                //set that to be the returned message
                $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['uploaded_file']['error'];
            }
        }
        $save_path = base_url().$file_path;

        $name = $_FILES['uploaded_file']['name'];
        $size = $_FILES['uploaded_file']['size'];
        $type = $_FILES['uploaded_file']['type'];


        $data = array(
            "message" => $message,
            "save" => $save_path,
            "name" => $name,
            "size" => $size,
            "type" => $type
        );

        $this->load->view('upload_file/upload_file.php', $data);


    }
}

upload_file.php查看:

<?php

$res = array(
    "msg" => $message,
    "path" => $save,
    "name" => $name,
    "size" => $size,
    "type" => $type
);

echo json_encode($res);



?>

答案 1 :(得分:0)

刚刚发现我没有发布帮助我解决这个问题的解决方案。这就是我做的事情

真正的问题是将文件发送到服务器。我只需要将缓存,processData和contentType设置为false,这对我有用。

还有一件事我需要使用表单数据将数据发送到服务器。

我发布了相关代码,帮助我将数据发送到服务器。希望它有所帮助

    var form = $('#add_message')[0]; // standard javascript object here
    var formData = new FormData( $('#add_message')[0]);
    $.ajax({
        type: "POST", 
        url: base_url + "apps/messages/composeMessage",
        cache: false,
        contentType: false,
        processData: false,
        data: formData,
        success: function(response){
          // some action on success
        }, 
        error: function(response){
          // some action on error 
        }
    });