Загрузка файла CodeIgniter AJAX, $_FILE пуста при загрузке
Я пишу script, который загружает файлы через Drag and Drop с помощью jQuery, который читает файл при удалении и добавляет его в массив таких файлов:
var files = [];
$(document).ready(function() {
jQuery.fn.dropbox = function(config) {
var dragging = 0;
var dragEnter = function(e) {
e.stopPropagation();
e.preventDefault();
dragging++;
$(".external-drop-indicator").fadeIn();
$(".toast.toast-success").fadeIn().css("display", "inline-block");;
return false;
};
var dragOver = function(e) {
e.stopPropagation();
e.preventDefault();
return false;
};
var dragLeave = function(e) {
e.stopPropagation();
e.preventDefault();
dragging--;
if(dragging === 0) {
$(".external-drop-indicator").fadeOut();
$(".toast.toast-success").fadeOut();
}
return false;
};
var drop = function(e) {
var dt = e.dataTransfer;
var files_upload = dt.files;
e.stopPropagation();
e.preventDefault();
if(files_upload && files_upload.length > 0 && config.onDrop !== undefined) {
files.push(files_upload);
config.onDrop(files_upload);
}
$(".external-drop-indicator").fadeOut();
$(".toast.toast-success").fadeOut();
};
var applyDropbox = function(dropbox) {
dropbox.addEventListener('dragenter', dragEnter, false);
dropbox.addEventListener('dragover', dragOver, false);
dropbox.addEventListener('dragleave', dragLeave, false);
dropbox.addEventListener('drop', drop, false);
};
return this.each(function() {
applyDropbox(this);
});
};
});
Вкратце, что он делает, добавляет расширенную функцию jQuery, чтобы включить перетаскивание по определенному элементу веб-сайта, на котором применяется функция.
Затем я применяю расширенную функциональность к телу, чтобы включить функцию перетаскивания файла так:
$(document).ready(function() {
$('body').dropbox({
onDrop: function(f) {
$(f).each(function(idx, data) {
var file_name = data.name;
var extension = file_name.split('.');
file_name = extension[0];
extension = extension[1];
if(extension == 'pdf' || extension == 'xls') {
showAjaxModal(base_url + 'index.php?modal/popup/file_create/' + folder_id + '/' + extension + '/' + file_name);
} else {
$(".upload-area").append('<div class="alert alert-danger" style="display:inline-block;width:480px;"><strong>Error!</strong> File type is incorrect.</div>');
}
});
}
});
});
Вкратце, что это делает, добавляется функция Drag and Drop в тело, а когда файл удаляется, он обнаруживает расширение файла, разделяя имя и расширение, чтобы я мог проверить, что расширение файла который был отброшен правильно. Затем он переходит к показу модальности для заполнения информации о файле, который загружается для последующей отправки, если расширение файла верное.
Затем я перехожу к заполнению информации о файле с помощью функции CodeIgniter "form_open()", когда модальные выскакивают так:
<?php echo form_open(base_url() . 'index.php?client/file/create/' . $param2, array('class' => 'form-horizontal form-groups-bordered validate ajax-upload', 'enctype' => 'multipart/form-data')); ?>
<div class="col-md-4 file-info">
<div class="icon-<?=($param3 == 'pdf' ? 'pdf' : 'document')?>"></div>
<p>
<?php echo $param4;?>
</p>
</div>
<div class="col-md-8 new-file">
<div class="form-group">
<div class="col-sm-12">
<div class="input-group">
<input type="text" class="form-control" name="tags" data-validate="required" data-message-required="Field is required" placeholder="File tags" value="" autofocus>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="input-group">
<input type="text" class="form-control" name="name" data-validate="required" data-message-required="Field is required" placeholder="File name" value="" autofocus>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="input-group">
<textarea rows="5" class="form-control" name="description" data-validate="required" data-message-required="Field is required" placeholder="File description" value="" autofocus></textarea>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-7">
<button type="submit" class="btn btn-info" id="submit-button">Upload</button>
<span id="preloader-form"></span>
</div>
</div>
<?php echo form_close(); ?>
Это в основном создает форму, которая позже будет отправлена через Ajax.
Теперь я перехожу к обработке файла через jQuery для отправки информации с файлом или файлами, которые загружаются так:
$(document).ready(function(e) {
$('.ajax-upload').submit(function(e) {
e.preventDefault();
var $elm = $(this);
var fd = new FormData();
for(var i = 0; i < files.length; i++) {
fd.append("file_" + i, files[i]);
}
var form_data = $(".ajax-upload").serializeArray();
$.each(form_data, function(key, input) {
fd.append(input.name, input.value);
});
var opts = {
url: $elm.attr('action'),
data: fd,
cache: false,
contentType: false,
processData: false,
type: 'POST',
beforeSend: uValidate,
success: showResponse
};
if(fd.fake) {
opts.xhr = function() {
var xhr = jQuery.ajaxSettings.xhr();
xhr.send = xhr.sendAsBinary;
return xhr;
}
opts.contentType = "multipart/form-data; boundary=" + fd.boundary;
opts.data = fd.toString();
}
jQuery.ajax(opts);
return false;
});
});
В принципе, действие по умолчанию для формы перезаписывается, и файлы, которые были отправлены в предыдущем фрагменте кода для функции перетаскивания, теперь добавляются к formData, к которым впоследствии присоединяются данные формы, которые были в форме, которую я отправляю. Затем formData отправляется через вызов AJAX.
Теперь контроллер выглядит так: он обрабатывает вызов AJAX и затем выполняет метод загрузки файлов на модели следующим образом:
function file($param1 = '', $param2 = '', $param3 = 0) {
if ($this->session->userdata('client_login') != 1) {
$this->session->set_userdata('last_page', current_url());
redirect(base_url(), 'refresh');
}
if ($param1 == 'create')
$this->crud_model->create_file($param2);
if ($param1 == 'edit')
$this->crud_model->update_file($param2);
if ($param1 == 'delete')
$this->crud_model->delete_file($param2, $param3);
$page_data['page_name'] = 'files';
$page_data['page_title'] = 'Files List';
$page_data['folder_id'] = $param3;
$this->load->view('backend/index', $page_data);
}
Вот модельный метод:
function create_file($folder_id) {
$data['name'] = $this->input->post('name');
$data['tags'] = $this->input->post('tags');
$data['description'] = $this->input->post('description');
$data['type'] = 'file';
$data['folder_id'] = $folder_id;
$data['client_id'] = $this->session->userdata('login_user_id');
$config['upload_path'] = 'uploads/tmp/';
$config['allowed_types'] = '*';
$config['max_size'] = '100';
$this->load->library('upload');
$this->upload->initialize($config);
var_dump($_FILES);
die();
foreach($_FILES as $field => $file)
{
//var_dump($_FILES); die();
// No problems with the file
if($file['error'] == 0)
{
// So lets upload
if ($this->upload->do_upload($field))
{
$data = $this->upload->data();
echo $data['full_path'];
}
else
{
$errors = $this->upload->display_errors();
var_dump($errors);
}
}
}
$this->db->insert('client_files' , $data);
}
Итак, в основном происходит то, что массив $_FILES пуст, и файл не загружается.
"Запрос полезной нагрузки", как показано в инструментах разработчика Chrome, выглядит следующим образом:
------WebKitFormBoundaryvVAxgIQd6qU8BtkF
Content-Disposition: form-data; name="file_0"
[object FileList]
------WebKitFormBoundaryvVAxgIQd6qU8BtkF
Content-Disposition: form-data; name="tags"
bsd
------WebKitFormBoundaryvVAxgIQd6qU8BtkF
Content-Disposition: form-data; name="name"
asd
------WebKitFormBoundaryvVAxgIQd6qU8BtkF
Content-Disposition: form-data; name="description"
asd
И ответ, который я получаю от var_dump() на модели, выглядит следующим образом:
array(0) {
}
Я пробовал решение по этому вопросу: Отправка multipart/formdata с помощью jQuery.ajax Но пока не повезло.
Любая идея о том, что я делаю неправильно и как исправить эту проблему? Благодарю.
Ответы
Ответ 1
Проблема заключается в том, что я посылаю массив файлов вместо одиночных файлов в вызове AJAX, особенно в этой части кода:
for(var i = 0; i < files.length; i++) {
fd.append("file_" + i, files[i]);
}
Решением было добавить файл по файлу в formData вместо массива файлов, что-то вроде этого:
for(var i = 0; i < files[0].length; i++) {
fd.append("file_" + i, files[i]);
}
Это добавит каждый отдельный файл массива файлов вместо самого массива файлов и решает проблему.
В заключение я отправил массив файлов вместо отдельных файлов, ключ к этому был [object FileList], который был показан в запросе вместо информации о файлах, которая теперь делает запрос следующим образом:
Content-Disposition: form-data; name="file"; filename="exfile.pdf"
Content-Type: application/pdf
