← Вернуться в раздел «Web-программирование»

» Загрузка файла на сервер средствами XMLHttpRequest

Автор: Sutar
Дата сообщения: 17.01.2016 13:04

Здравствуйте,
почитал много статьей, где показывали разные способы загрузки файлов на сервер средствами XMLHttpRequest.
Вот один из примеров: https://learn.javascript.ru/xhr-onprogress
В коде, у меня не получается отправить данные на файл upload.php.

Вот код:

Код: <form name="upload">
<input type="file" name="myfile">
<input type="submit" value="Загрузить">
</form>

<div id="log">Прогресс загрузки</div>

<script>
function log(html) {
    document.getElementById('log').innerHTML = html;
}
document.forms.upload.onsubmit = function() {
    var file = this.elements.myfile.files[0];
    if (file) upload(file);
    return false;
}
function upload(file) {
    var xhr = new XMLHttpRequest();
    xhr.onload = xhr.onerror = function() {
        alert(this.responseText);
        if (this.status == 200) log("success");
        else log("error " + this.status);
    };
    xhr.upload.onprogress = function(event) {
        log(event.loaded + ' / ' + event.total);
    }
    xhr.open("POST", "upload.php", true);
    xhr.send(file);
}
</script>

Автор: Sutar
Дата сообщения: 17.01.2016 21:27

Кто-то поможет?(

Автор: ManHunter
Дата сообщения: 18.01.2016 01:05

Код:
$input=fopen('php://input', 'rb');
$f=fopen('uploaded_file.dat', 'w+');

while(!feof($input)) {
$data=fread($input,100000);
fwrite($f,$data);
unset($data);
}
fclose($input);

Автор: vs6262
Дата сообщения: 18.01.2016 11:51

ManHunter
спасибо и мне такая вещь пригодится

вот бы ещё кто помог чтобы оригинальное имя файла сохранилoсь бы ?

Автор: ManHunter
Дата сообщения: 18.01.2016 13:09

Передаешь его параметром в загрузчик, делов-то.

Код: xhr.open("POST", "upload.php?fname="+fname, true);

Автор: vs6262
Дата сообщения: 18.01.2016 14:28

ManHunter
спасибо. сейчас работает.

Sutar
я там добавил *URIComponent()

index.html

Код: <!DOCTYPE HTML>
<html>

<body>

<head>
<meta charset="utf-8">
</head>
<form name="upload">
<input id="fileInput" type="file" name="myfile">
<input type="submit" value="Загрузить">
</form>

<div id="log">Прогресс загрузки</div>

<script>

var fname="";

document.getElementById('fileInput').onchange = function () {
// alert('Selected file: ' + this.value);
fname = encodeURIComponent(this.value);
};

function log(html) {
document.getElementById('log').innerHTML = html;
}

function onSuccess() {
log('success');
}

function onError() {
log('error');
}

function onProgress(loaded, total) {
log(loaded + ' / ' + total);
}

document.forms.upload.onsubmit = function() {
var file = this.elements.myfile.files[0];
if (file) {
upload(file);
}
return false;
}

function upload(file) {

var xhr = new XMLHttpRequest();

// обработчики можно объединить в один,
// если status == 200, то это успех, иначе ошибка
xhr.onload = xhr.onerror = function() {
if (this.status == 200) {
log("success");
} else {
log("error " + this.status);
}
};

// обработчик для закачки
xhr.upload.onprogress = function(event) {
log(event.loaded + ' / ' + event.total);
}

xhr.open("POST", "upload.php?fname="+fname, true);
xhr.send(file);

}
</script>
</body>

</html>

Автор: Sutar
Дата сообщения: 18.01.2016 16:45

ManHunter
Попробовал реализовать в таком виде:

Код: <form name="upload">
<input type="file" name="file[]" id="file" multiple>
</form>

<script>
document.getElementById('file').onchange = function() {
    //var file = this.elements.myfile.files[0];
    var file = new FormData(document.forms.upload[0]);
    if (file) upload(file);
    return false;
}
</script>

Автор: vs6262
Дата сообщения: 18.01.2016 22:40

Цитата:

Только 1 нюанс, объем файла показываем средствами js не равен объему файла на сервере и реального размера (там примерно в 150-300 байт разбежность). Это можно как-то подправить?

Sutar
пробуйте мой код там всё 100% сходится и на сервере и реального размера

а с multiple может кто Вам и поможет

Автор: Sutar
Дата сообщения: 20.01.2016 18:24

vs6262
а в fread() указывать макс. число загружаемого файла? Тоесть файлы размером с 20гб и т.д. не загружаться?(
и зачем decodeURIComponent() в php? там и так корректно имя файла передается... или я что-то не учёл?

Автор: vs6262
Дата сообщения: 21.01.2016 11:25

Цитата:

fread()

http://php.net/manual/de/function.fread.php
http://www.w3schools.com/php/func_filesystem_fread.asp

decodeURIComponent() в php
и encodeURIComponent() в JS

это для корректной передачи названий файла в Unicode

Автор: Sutar
Дата сообщения: 21.01.2016 16:30

vs6262
да я знаю зачем fread....
просто я тестировал код, ставил 1 вместо 10000 и была закачка файлов по 300мб и т.д. Зачем тогда 10000 если можно поставить 1?)

Автор: vs6262
Дата сообщения: 21.01.2016 19:27

http://php.net/manual/ru/function.fread.php

fread() читает до length байт из файлового указателя handle. Чтение останавливается как только было достигнуто одно из следующих условий:
◦ было прочитано length байт
◦ достигнут EOF (конец файла)
◦ стал доступен пакет или произошел таймаут сокета (для сетевых потоков)
◦ если читаемый поток является буферизованным и не представляет собой обычный файл, то за один раз максимум читается количество байт, равное размеру одной порции данных (обычно это 8192), однако, в зависимости от ранее буферизованных данных размер возвращаемых данных может быть больше размера одной порции данных.

больше не знаю

Автор: Sutar
Дата сообщения: 21.01.2016 19:55

vs6262
Спасибо. Но это я знаю и так)

Автор: vs6262
Дата сообщения: 24.01.2016 20:24

Sutar
пробовал в Firefox на XAMPP загружает файлы ~ max 1,35 GB
а IE 11 XAMPP Windows почему то стирает большие исходные файлы

Добавлено:
http://www.phplivex.com/ajax_file_upload.php

Автор: vs6262
Дата сообщения: 26.01.2016 21:25

было бы интересным Multiupload решение

может кто поможет ?

Автор: UTF32KG
Дата сообщения: 28.01.2016 06:14

Цитата:

было бы интересным Multiupload решение

и мне это пригодилось бы

Автор: Meer
Дата сообщения: 01.02.2016 23:29

Цитата:

и мне это пригодилось бы

Автор: vs6262
Дата сообщения: 14.02.2016 17:51

Код: <!doctype html>
<html>
    <head>
    <meta charset="utf-8" />
        <title></title>

    </head>
    <body>

<form action="" method="post">
<input type="text" name="user_name" />
<input type="file" name="user_file" />
<button type="submit">Submit</button>
</form>

<script>
var ajaxFileUpload = function (data) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "ajax-upload.php", true);
xhr.addEventListener("load", function (e) {
// file upload is complete
console.log(xhr.responseText);
// alert(xhr.responseText);
});
xhr.send(data);
};
</script>

<script>
var form = document.querySelector("form");

form.addEventListener("submit", function (e) {
var fdata = new FormData(this);

// Optional. Append custom data.
//fdata.append('user_city', 'Los Angeles');

ajaxFileUpload(fdata);

// Prevents the standard submit event
e.preventDefault();
return false;
}, false);
</script>

    </body>
</html>

Автор: Ramzzes
Дата сообщения: 16.02.2016 20:11

А что бы не воспользоваться готовым решением?
Я в своих проектах plupload юзаю, крайне удобная библиотека.

Автор: freddyk
Дата сообщения: 31.07.2016 01:30

Цитата:

http://www.phplivex.com/ajax_file_upload.php

У Вас получилась в этом варианте быстрая загрузка ?
По умолчанию этот загрузчик использует паузы в чтении POST-данных (блоки по 4К каждые 0.1..0.2 сек) и поллинге загруженного размера (0.2 сек) - что выражается в малой (20..40 КБайт/сек) скорости загрузки.
Я пытался "играть" с другими цифрами задержек - и получил глюки визуализации прогрессбара.

Автор: Mavrikii
Дата сообщения: 31.07.2016 22:29

freddyk
зачем вам устаревший фреймворк? он не развивается с 2010 года.

Страницы: 1

Предыдущая тема: JavaScript

Форум Ru-Board.club — поднят 15-09-2016 числа. Цель - сохранить наследие старого Ru-Board, истории становления российского интернета. Сделано для людей.