CodeIgniter 文件上传不理解 ajax 文件提交答案

【问题标题】：CodeIgniter File upload does not understands ajax file submissionCodeIgniter 文件上传不理解 ajax 文件提交
【发布时间】：2014-01-02 17:38:37
【问题描述】：

我编写了一个 JS 脚本、一个 CodeIgniter 控制器和一个 html 表单来通过 jquery ajax 上传文件。它不上传文件。我已经解决了所有问题，但最后一个问题超出了我的能力范围。 AJAX 请求成功完成，但 codeigniter 上传类错误“您没有选择要上传的文件。”

这是我的 HTML 文件和按钮：

<input type="file" class="form-file" id="file" multiple name="file[]" />
                    <input value='add picture' type="button" name="file-submit" class="form-submit" id='file-submit'/>

这里是负责上传文件的 CodeIgniter 控制器：

class Upload extends CI_Controller
{
    function pictures ()
    {

        $config['upload_path'] = '../uploads/categories/';
        $this->load->library("upload", $config);        

        if(!$this->upload->do_upload("file"))
        {
                echo $this->upload->display_errors();
        }
        else
        {
                    echo "Thanks";  
        }
    }
}

这里是 jQuery AJAX 脚本：

$(document).ready(function()
{


       var files; // main variable to keep images into it

       // lets put the files into a variable
       var file_field = $('input[type=file]');
       file_field.on('change', appendFiles);
       function appendFiles (event)
       {
             files = event.target.files;
             console.log(files);
       }

       // now attach click event to upload

       $('#file-submit').on('click',

       function uploadFiles (event)
       {

            event.preventDefault();  

            // create a form data
            var data = new FormData();
            $.each(files, function (key, val)
            {
                data.append(key, val);
                // now all the contents of the files have been assigned to a form-data variable
            });

            // begin the AJAX
            $.ajax({
                url : base_path("upload/pictures/"),
                data: data,
                cache:false,
                processData: false,
                contentType: false,
                success: function(msg)
                {
                        console.log(msg);
                },              
                error : function()
                {
                    console.log("Error");   
                }
            });

       });                 

    //   form_file
});

【问题讨论】：

你可以使用 jQueyr 插件malsup.com/jquery/form

标签： javascript php jquery ajax codeigniter

【解决方案1】：

使用 jQueryFileUpload 插件：

下载JS：http://yourcareeracademy.com/yca/assets/plugins/ajaxfileupload/ajaxfileupload.js

-查看-

<!doctype html>
<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
   <script src="<?php echo base_url('js/ajaxfileupload.js')?>"></script>
</head>
<body>
  <h1>Upload File</h1>
  <form method="post" action="" id="upload_file">
     <label for="title">Title</label>
     <input type="text" name="title" id="title" value="" />

     <label for="userfile">File</label>
     <input type="file" name="userfile" id="userfile" size="20" />

     <input type="submit" name="submit" id="submit" />
  </form>
<h2>Files</h2>
<div id="files"></div>
</body>
</html>

--页面中的脚本--

$(function() {
   $('#upload_file').submit(function(e) {
      e.preventDefault();
      $.ajaxFileUpload({
         url         :'./upload/upload_file/', 
         secureuri      :false,
         fileElementId  :'userfile',
         dataType    : 'json',
         data        : {
            'title'           : $('#title').val()
         },
         success  : function (data, status)
         {
            if(data.status != 'error')
            {
               $('#files').html('<p>Reloading files...</p>');
               refresh_files();
               $('#title').val('');
            }
            alert(data.msg);
         }
      });
      return false;
   });
});

-控制器-

public function upload_file()
{
   $status = "";
   $msg = "";
   $file_element_name = 'userfile';
   if (empty($_POST['title']))
   {
      $status = "error";
      $msg = "Please enter a title";
   }
   if ($status != "error")
   {
      $config['upload_path'] = './files/';
      $config['allowed_types'] = 'gif|jpg|png|doc|txt';
      $config['max_size']  = 1024 * 8;
      $config['encrypt_name'] = TRUE;

      $this->load->library('upload', $config);

      if (!$this->upload->do_upload($file_element_name))
      {
         $status = 'error';
         $msg = $this->upload->display_errors('', '');
      }
      else
      {
         $data = $this->upload->data();
         $file_id = $this->files_model->insert_file($data['file_name'],     $_POST['title']);
         if($file_id)
         {
            $status = "success";
            $msg = "File successfully uploaded";
         }
         else
         {
            unlink($data['full_path']);
            $status = "error";
            $msg = "Something went wrong when saving the file, please try again.";
         }
      }
      @unlink($_FILES[$file_element_name]);
   }
   echo json_encode(array('status' => $status, 'msg' => $msg));
}

【讨论】：