我正在使用codeigniter 3.1。我想使用ajax发布上传数据。
Ajax上传文件不起作用。但是,当我发布不带ajax的简单表单时,它工作正常。
我不知道为什么,但控制台没有错误。
的HTML
<?php echo form_open_multipart(site_url("upload/post"), ['id' => 'uploader']) ?> <input type="file" name="userfile" value=""> <input type="submit" value="Submit" /> <?php echo form_close() ?>
JAVASCRIPT
$('#uploader').submit(function (event) { event.preventDefault(); $.ajax({ url: window.location.href + '/post', type: "POST", dataType: 'json', data: new FormData(this) }); });
控制器
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']; }
问题之一是文件上传使用的机制与其他表单<input>类型不同。这就是为什么$this->input->post("userfile")没有为您完成工作的原因。其他答案建议使用javascript,FormData而这个答案也可以。
<input>
$this->input->post("userfile")
FormData
一个非常简单的表单,用于选择文件并提交。请注意从简单按钮更改为<input type="submit"...。这样做使javascript使用该FormData对象变得容易得多。
<input type="submit"...
FormData文档
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://code.jquery.com/jquery-2.2.2.js"></script> <title>Upload Test</title> </head> <body> <?= form_open_multipart("upload/post", ['id' => 'uploader']); ?> <input type="file" name="userfile"> <p> <input type="submit" value="Upload"> </p> <?php echo form_close() ?> <div id="message"></div> <script> $('#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) { console.log(data); if (data.result === true) { $("#message").html("<p>File Upload Succeeded</p>"); } else { $("#message").html("<p>File Upload Failed!</p>"); } $("#message").append(data.message); } }); }); </script> </body> </html>
使用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("<p>File Upload Succeeded</p>"); } else { $("#message").html("<p>File Upload Failed!</p>"); } $("#message").append(data.message); } }); });
我添加了一些将结果“报告”到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 = "<p>File: {$image_file}</p>"; $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相关问题。