Ajax上传不工作codeigniter

我正在使用codeigniter 3.1。 我想使用ajax发布上传数据。

Ajax上传文件不起作用。 但是当我发布没有ajax的简单表单时，它工作正常。

我不知道为什么但是在控制台中没有错误。

HTML

 'uploader']) ?>    

JAVASCRIPT

  $('#uploader').submit(function (event) { event.preventDefault(); $.ajax({ url: window.location.href + '/post', type: "POST", dataType: 'json', data: new FormData(this) }); }); 

CONTROLLERS

  public function post() { $this->load->helper('url'); $this->load->helper('form'); $this->load->library("upload"); $file = $this->common->nohtml($this->input->post("userfile")); $this->upload->initialize(array( "upload_path" => 'upload', "overwrite" => FALSE, "max_filename" => 300, "encrypt_name" => TRUE )); $this->upload->do_upload('userfile'); $data = $this->upload->data(); $image_file = $data['file_name']; } 

Answer 1

其中一个问题是文件上载使用的机制与其他格式类型不同。 这就是为什么$this->input->post("userfile")没有为你完成工作。 其他答案建议使用javascript的FormData ，这个也是。

HTML

一种非常简单的表单，用于选择文件并提交文件。 注意从简单按钮到 这样做使得javascript更容易使用FormData对象。

FormData文档

          'uploader']); ?>  
  
  
    

JAVASCRIPT

使用FormData捕获字段。 请注意，我们不是处理按钮，而是处理提交事件。

 $('#uploader').submit(function (event) { event.preventDefault(); $.ajax({ url: window.location.href + '/post', type: "POST", dataType: 'json', data: new FormData(this), processData: false, contentType: false, success: function (data) { //uncomment the next line to log the returned data in the javascript console // console.log(data); if (data.result === true) { $("#message").html("
File Upload Succeeded
"); } else { $("#message").html("
File Upload Failed!
"); } $("#message").append(data.message); } }); }); 

CONTROLLER

我添加了一些代码，将结果“报告”到ajax并将其显示在上传页面上。

 class Upload extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper(['form', 'url']); } public function index() { $this->load->view('upload_v'); } public function post() { $this->load->library("upload"); $this->upload->initialize(array( "upload_path" => './uploads/', 'allowed_types' => 'gif|jpg|png|doc|txt', "overwrite" => FALSE, "max_filename" => 300, "encrypt_name" => TRUE, )); $successful = $this->upload->do_upload('userfile'); if($successful) { $data = $this->upload->data(); $image_file = $data['file_name']; $msg = "
File: {$image_file}
"; $this->data_models->update($this->data->INFO, array("image" => $image_file)); } else { $msg = $this->upload->display_errors(); } echo json_encode(['result' => $successful, 'message' => $msg]); } } 

这将上传您的文件。 您的工作可能没有完成，因为我怀疑您没有将所需的所有文件信息保存到数据库中。 那，我怀疑你会对上传文件的名称感到惊讶。

我建议你研究一下PHP如何处理文件上传，并在SO 上检查文件上传时类似的一些与codeigniter相关的问题。

Answer 2

另一种方法是将以base64编码的文件传递给PHP：

• 使用$('#userfile').prop('files')[0]从#userfile字段中获取所选文件#userfile $('#userfile').prop('files')[0] ;
• 使用FileReader.readAsDataURL（）将该文件的内容转换为base64编码的字符串。 我们打算称这个content ; 这是一个类似的问题，展示如何做和扩大答案和可能性;
• 发送AJAX传递filename和content字符串;
• 现在在CI上，获取POST数据;
• base64_decode（）的content ;
• 使用filename名将结果fwrite（）到filename 。

这样你也可以避免POST所有表单字段。

Answer 3

试试这个..也使用FormData() formdata post文件发布数据。 要获取所有表单输入，包括type="file"您需要使用FormData对象 。

 $('#post').on('click', function (e) { var file_data = $("#userfile").prop("files")[0]; var form_data = new FormData(); form_data.append("userfile", file_data) $.ajax({ url: window.location.href+'/post', type: 'POST', data: form_data, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); 

更多… https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

Answer 4

调节器

 public function upload() { $this->load->library('upload'); if (isset($_FILES['myfile']) && !empty($_FILES['myfile'])) { if ($_FILES['myfile']['error'] != 4) { // Image file configurations $config['upload_path'] = './upload/'; $config['allowed_types'] = 'jpg|jpeg|png'; $this->upload->initialize($config); $this->upload->do_upload('myfile'); } } } 

视图

 ("#myform").submit(function(evt){ evt.preventDefault(); var url = $(this).attr('action'); var formData = new FormData($(this)[0]); $.ajax({ url: url, type: 'POST', data: formData, processData: false, contentType: false, success: function (res) { console.log(res); }, error: function (error) { console.log(error); } }); // End: $.ajax() }); // End: submit() 

如果有任何疑问，请告诉我

Answer 5

你需要提交表单不是点击，而是提交…给表单一个id，然后提交put ajax

HTML

  'post'); ?>   Submit  

JAVASCRIPT

$（’#post’）。on（’submit’，function（）{

  var formData = new FormData(); formData.append("userfile",$("#userfile")[0].files[0]); $.ajax({ url: window.location.href+'/post', type: "POST", data: formData }); 

CONTROLLERS

 public function post() { $this->load->library("upload"); $file = $this->common->nohtml($this->input->post("userfile")); $this->upload->initialize(array( "upload_path" => 'upload', "overwrite" => FALSE, "max_filename" => 300, "encrypt_name" => TRUE, )); $data = $this->upload->data(); $image_file = $data['file_name']; $this->data_models->update($this->data->INFO, array( "image" => $image_file ) ); 

}