Я использую 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") не выполняет эту работу для вас. Другие ответы предложили использовать FormData javascript, и это тоже делает.
HTML
Очень простая форма для выбора файла и отправки его. Обратите внимание на изменение с простой кнопки на <input type="submit"... Это делает намного проще для javascript использовать объект FormData .
Документация 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>
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("<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]); } }
Это загрузит ваш файл. Ваша работа, вероятно, не выполняется, потому что я подозреваю, что вы не сохраняете всю информацию о файле, которая вам нужна для db. Это, и я подозреваю, что вы будете удивлены именем загруженного файла.
Я предлагаю вам изучить, как PHP обрабатывает загрузку файлов и изучает некоторые похожие вопросы, связанные с кодом, на загрузку файлов здесь на SO.
Другим подходом к этому было бы передать PHP файл, закодированный в base64:
#userfile используя $('#userfile').prop('files')[0] ; content ; Вот аналогичный вопрос, показывающий, как сделать и расширить ответ и возможности; filename и строки content ; content ; filename . Таким образом, вы могли бы избежать POSTing всех полей формы.
попробуйте это. Опубликовать данные, используя FormData() formdata post file также. Чтобы получить все входные данные формы, включая 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
контроллер
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'); } } }
Посмотреть
<form id="myform" action="<?php base_url('controller/method'); ?>" method="post"> <input type="file" name="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()
Дайте мне знать, если какой-либо запрос
вам нужно отправить форму не на клик, а на submit … предоставить форму id, а затем отправить submit ajax
HTML
<?php $attributes = array('id' => 'post'); ?> <?php echo form_open_multipart(site_url("upload/post",$attributes), ?> <input type="file" id="userfile" name="userfile" value=""> <button id="post">Submit</button> <?php echo form_close() ?>
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 });
КОНТРОЛЛЕРЫ
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 ) );
}