Нужен совет по Ajax fileupload

Question

Я пытаюсь получить доступ к загрузчику файлов Ajax http://valums.com/ajax-upload/

В документе сказано:

var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('file-uploader'),
    // path to server-side upload script
    action: '/server/upload'
    // WHAT IS action:?
});

Свойство element означает, какой идентификатор элемента используется какКнопка загрузки.Что такое действие ?Это должен быть какой-то обработчик для загруженных файлов?

Как я могу обрабатывать загруженные файлы и где они находятся?

В документе написано

// events         
// you can return false to abort submit
onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){},
onComplete: function(id, fileName, responseJSON){},
onCancel: function(id, fileName){},

Я хочу при загрузкезавершите отображение списка файлов где-нибудь, скажем, в div с ID = list

Короткий фрагмент будет высоко оценен и награжден.

Answer 1

Я довольно часто использовал File Uploader, и я думаю, что это лучший загрузчик файлов.

Действие - это метод (URL), который получает вызов от вашего клиентского скрипта Ajax. Вы должны определить DIV в своем HTML:

<div id="uploaderFile"></div>

Я использовал функцию javascript для построения загрузчика вокруг DIV:

function CreateImageUploader() {
    var uploader = new qq.FileUploader({
        element: $('#uploaderFile')[0],
        template: '<div class="qq-uploader">' +
                              '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                              '<div class="qq-upload-button ui-button ui-widget ui-corner-all ui-button-text-only ui-state-default">Seleziona il Listino Excel</div>' +
                              '<ul class="qq-upload-list"></ul>' +
                              '</div>',
        hoverClass: 'ui-state-hover',
        focusClass: 'ui-state-focus',
        action: 'Home/UploadImage',
        allowedExtensions: ['jpg', 'gif'],
        params: { },
        onSubmit: function(file, ext) {

            },
        onComplete: function(id, fileName, responseJSON) {
            $("#PopupImageUploader").dialog('close');
            }
        }
    });
}

Что здесь происходит, вы создаете загрузчик вокруг элемента: $('#uploaderFile')[0]. Я использовал стандартный шаблон, но вы можете изменить внешний вид. Когда вы это сделаете, все будет в значительной степени настроено на стороне клиента. На стороне сервера (это зависит от того, что вы используете) вы должны перехватить и прочитать файл и сохранить его.
Я использую ASP.NET MVC. Вы можете найти мои действия здесь и здесь Ваш серверный код сможет сохранить файл там, где вы хотите, и вернет информацию клиентскому скрипту.
Лично я возвращаю данные json, которыми управляю с событием onComplete, чтобы: закрыть диалог (как в примере); показать сообщение и т. д. и т. д.

Если вы хотите передать параметры клиенту на стороне сервера, вы можете вернуть объект JSON. Я бы сделал что-то вроде этого:

return ("{success:true, newfilename: '" + newFileName + "'}");

Я считаю, что в PHP может быть что-то вроде этого:

echo {success:true, newfilename: '" + newFileName + "'}";

Простите, если в этом есть ошибки, но я никогда не писал ни одной строки PHP за всю свою жизнь; -)

клиентская сторона теперь может проверять объект JSON следующим образом:

onComplete: function(id, fileName, responseJSON) {
   alert(responseJSON.newfilename);
}

Как видите, я передаю результат действия: success:true или success:false, чтобы показать пользователю предупреждение:

onComplete: function(id, fileName, responseJSON) {
if (responseJSON.success)
{
    alert(responseJSON.newfilename);
}
else {
    alert("something wrong happened");
}
}

Answer 2

Что такое действие?Это должен быть какой-то обработчик для загружаемых файлов?

Да, так же, как для атрибута элемента HTML <form> .

Как яможет обрабатывать загруженные файлы

С помощью сценария на стороне сервера, написанного на предпочтительном языке вашего сервера.

и где он находится?

Вероятно, как поток в STDIN.Библиотека форм, которую вы используете с вышеупомянутым серверным языком, имеет методы для ее автоматического извлечения.

Answer 3

Как я могу обрабатывать загруженные файлы и где они находятся?

Это зависит от вашего веб-сервера и языка бэкэнда.В PHP посмотрите на массив $_FILES.

Что такое действие?Это должен быть какой-то обработчик для загруженных файлов?

URL-адрес, на который отправляется форма, используемая для загрузки файла.