Прогресс загрузки jQuery и загрузка файлов AJAX

Похоже, я не совсем четко изложил свою проблему. Мне нужно отправить файл (используя AJAX), и мне нужно получить прогресс загрузки файла, используя http://wiki.nginx.org/HttpUploadProgressModule. Мне нужно хорошее решение этой проблемы. Я пытался с плагином jquery.uploadprogress, но мне приходится переписывать большую часть его, чтобы он работал во всех браузерах и отправлять файл с помощью AJAX.

Все, что мне нужно, это код для этого, и он должен работать во всех основных браузерах (Chrome, Safari, FireFox и IE). Было бы еще лучше, если бы я мог найти решение, которое будет обрабатывать несколько загрузок файлов.

Я использую плагин jquery.uploadprogress для получения прогресса загрузки файла из модуля NginxHttpUploadProgressModule. Это внутри iframe для приложения facebook. Он работает в Firefox, но не работает в Chrome/ Safari.

Когда я открываю консоль, я получаю это.

Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80

Есть идеи, как мне это исправить?

Я хотел бы также отправить файл с помощью AJAX, когда он будет завершен. Как бы я это реализовал?

РЕДАКТИРОВАТЬ:
Мне это нужно в ближайшее время, и это важно, поэтому я собираюсь наградить вас 100 баллами за этот вопрос. Первый, кто ответит, получит 100 баллов.

РЕДАКТИРОВАТЬ 2:
Jake33 помог мне решить первую проблему. Первый, кто оставит ответ о том, как отправить файл с помощью ajax, также получит 100 баллов.

Источник

2 ответа

Решение

Загрузка файлов на самом деле возможна в эти дни с помощью AJAX. Да, AJAX, а не какой-нибудь дурацкий подражатель AJAX, такой как swf или java.

Этот пример может вам помочь: https://webblocks.nl/tests/ajax/file-drag-drop.html

(Он также включает интерфейс перетаскивания, но это легко игнорируется.)

В основном это сводится к следующему:

<input id="files" type="file" />

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    (xhr.upload || xhr).addEventListener('progress', function(e) {
        var done = e.position || e.loaded
        var total = e.totalSize || e.total;
        console.log('xhr progress: ' + Math.round(done/total*100) + '%');
    });
    xhr.addEventListener('load', function(e) {
        console.log('xhr upload complete', e, this.responseText);
    });
    xhr.open('post', '/URL-HERE', true);
    xhr.send(file);
});
</script>

(демо: http://jsfiddle.net/rudiedirkx/jzxmro8r/)

Так что в основном это сводится к этому =)

xhr.send(file);

куда file это typeof Blob: http://www.w3.org/TR/FileAPI/

Другой (лучший ИМО) способ заключается в использовании FormData, Это позволяет вам: 1) назвать файл, как в форме, и 2) отправить другие вещи (файлы тоже), как в форме.

var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);

FormData делает серверный код чище и более обратно совместимым (поскольку запрос теперь имеет тот же формат, что и обычные формы).

Все это не экспериментально, но очень современно. Chrome 8+ и Firefox 4+ знают, что делать, но я не знаю ни о каких других.

Вот как я обработал запрос (1 изображение на запрос) в PHP:

if ( isset($_FILES['file']) ) {
    $filename = basename($_FILES['file']['name']);
    $error = true;

    // Only upload if on my home win dev machine
    if ( isset($_SERVER['WINDIR']) ) {
        $path = 'uploads/'.$filename;
        $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
    }

    $rsp = array(
        'error' => $error, // Used in JS
        'filename' => $filename,
        'filepath' => '/tests/uploads/' . $filename, // Web accessible
    );
    echo json_encode($rsp);
    exit;
}
Источник

Вот несколько вариантов использования AJAX для загрузки файлов:

ОБНОВЛЕНИЕ: вот плагин JQuery для загрузки нескольких файлов.

Источник
Другие вопросы по тегам