jQuery fileupload-получить список загруженных файлов
я использую очень хороший плагин jquery blueimp / jQuery-файл-загрузить
$('#fileupload').fileupload({
autoUpload: true
, filesContainer: '#attachments_presentation tbody'
, stop: function (e) {
console.log(data);
}
});
и я не могу сделать что-то очень простое: получить список загруженных файлов
(с их именем на сервере)
во-первых, я наивно, хотя он будет храниться на входе файла, чтобы я мог получить список с
$('#fileupload').val();
но это не так, поэтому я подумал о чем-то вроде
$('#fileupload').fileupload('getfiles');
Я не могу найти выход из docs
может кто-нибудь сказать мне, как я могу получить список загруженных имена файлов на сервере ?
обновление
Я хотел бы получить имя загруженных файлов на сервер для того, чтобы потом иметь возможность управлять ими.
например:
- я загружаю файл с именем
trutruc.pdf
- загрузить
test.png
- я повторно загружаю файл с именем
trutruc.pdf
- I удалить первый файл
текущий список файлов на сервере должен быть test.png
, trutruc (2).pdf
обновление 2
я использую по умолчанию PHP скрипт отправлен С fileUpload
10 ответов
когда вы создаете экземпляр плагина по умолчанию, есть часть кода, которая извлекает все предыдущие загруженные файлы (при условии, что вы не изменили код сервера):
см. На main.js
строка файла 70:
// Load existing files:
$.ajax({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).done(function (result) {
$(this).fileupload('option', 'done')
.call(this, null, {result: result});
});
чем если вы посмотрите дальше в своем коде, есть таблица, которая будет заполнена шаблоном:
<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
вы можете легко проанализировать каждый из этой таблицы после загрузки файлов:
$('tbody.files tr').each(function(i, e) {
//according to @Brandon's comment it's now p.name
var name = $(e).find('td.name').text();
var size = $(e).find('td.size').text();
//etc.
});
Я использую версию UI. Вот скрипт, который захватывает серверные ссылки из таблицы файлов и заполняет массив:
var files = new Array();
$("#fileupload td p.name a").each(function() {
var name = $(this).attr("href");
files.push(name);
});
alert(files.join('\n'));
вы также можете попробовать это
$('#fileupload').bind('fileuploadcompleted', function (e, data) {
var filess= data.result.files[0];
var filenam = filess.name;
alert(filenam);
});
у меня была та же проблема, и через несколько часов и десятки загрузок файлов, я думаю, что у меня есть ответ, который вам нужен:
done: function (e, data) {
response = data.response();
parsedresponse = $.parseJSON(response.result);
console.log(parsedresponse.files);
}
Как вы можете видеть, вы найдете имя загруженных файлов в parsedresponse.files[i].url
(Я - это 0-индекс загруженные файлы).
Ok... его URL загруженного файла, но вы сможете извлечь окончательное имя файла ...
надеюсь, что это помогает. (это нигде в документации, мне удалось добраться до этого решения, проверив выходы консоли Firebug)
чтобы получить список загруженных имен файлов из сервер, требуется серверный код:
UploadHandler.в PHP используется для загрузки файлов в каталоге/s на вашем сервере.
Если вы загрузили архив плагина и извлекли его на свой сервер, файлы будут храниться в php/files по умолчанию. (Убедитесь, что каталог php/files имеет разрешения на запись сервера.) видеть: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup
UploadHandler.в PHP это просто обработчик загрузки. Он не предоставляет доступ к файлам сервера без подключения к серверу.
код JavaScript не может получить доступ к файлам на сервер, поэтому для этого вам понадобится PHP-скрипт. (Хотя JavaScript может отслеживать все загруженное, переименованное и удаленное.)
вы можете изменить UploadHandler.в PHP для подключения к базе данных и записи путей к файлам (и любых других данных) в таблицу файлов во время загрузки. Затем вы можете получить доступ к своим файлам через стандартные SQL-запросы:
изменить UploadHandler.в PHP:
- добавить параметры подключения к базе данных
- написать функцию SQL-запроса
- напишите вторую функцию для выполнения запроса
- звонок второй функция
см.:https://github.com/blueimp/jQuery-File-Upload/wiki/Working-with-databases
Ну, это довольно старый пост, но это то, что сработало очень хорошо для меня, поэтому я решил опубликовать его.
-
привязать событие к FileUploader (я сделал это в main.в JS):
$('#fileupload').bind('fileuploaddone', function (e, data) { FileUploadDone(e, data); });
-
в вашем html-файле используйте следующий код, чтобы получить имя файла:
function FileUploadDone(e, data) { for (x in data._response.result.files){ if (data._response.result.files[x].error == "") alert(data._response.result.files[x].name); else alert(data._response.result.files[x].error); }}
вы должны смотреть объект данных в firebug. Этот объект инкапсулирует большую часть информации.
Если, вы используете базовый плагин, упомянутый в документация вам нужно передать данные функции в атрибуте done. измените это:
stop: function (e) {
для этого:
done: function (e, data) {
Я не знаю о остановке, если вы получите его с одной из страниц документации, то я думаю, что то же самое применяется здесь, вы не можете работать с данными, если он недоступен.
Надеюсь, это поможет
попробуйте использовать метод done и поместите имена в скрытый ввод, затем выберите их:
$('#fileupload').fileupload({
autoUpload: true
, filesContainer: '#attachments_presentation tbody'
, stop: function (e) {
console.log(data);
}
, done: function(e,data){
var filess= data.files[0];
var filenam = filess.name;
data.context.text(filenam+' uploaded successfully.');
$('#formId').append('<input type="hidden" name="fileName" value="'+filenam+'"/>');
}
});
чтобы получить список файлов При загрузке:
$('#fileupload').bind('fileuploadfinished', function (e, data) {
console.log(data.originalFiles);
});
// Initialize the jQuery File Upload widget:
$('#edit-product').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
disableImageResize: false,
autoUpload:false,
url: 'YOURURL'
}).bind('fileuploaddone', function (e, data) {
console.log(data.result.files[0]);
});