Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Активные темы » Загрузка файла на сервер средствами XMLHttpRequest

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3

Открыть новую тему     Написать ответ в эту тему

Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте,
почитал много статьей, где показывали разные способы загрузки файлов на сервер средствами 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>

 
 
Файл upload.php:

Код:
<?php
var_dump($_POST);
var_dump($_FILES);
var_dump($_GET);
?>

 
В результате выполнения скрипта, var_dump везде пустой... В чем тут ошибка? Если отправлять данные так:
 

Код:
<form method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit" name="load" value="Загрузить"/>
</form>

 
То var_dump($_FILES); - существует и есть все данные.

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 14:04 17-01-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
del

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 15:14 17-01-2016 | Исправлено: vs6262, 15:18 17-01-2016
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кто-то поможет?(

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 22:27 17-01-2016
ManHunter



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
 
    $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);
 


----------
"На любое мое движение ваша реакция предусмотрена,
В лучшем случае - равнодушие, в худшем случае - патология..." (C) Егор Летов

Всего записей: 3091 | Зарегистр. 20-03-2004 | Отправлено: 02:05 18-01-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ManHunter
спасибо и мне такая вещь пригодится
 
вот бы ещё кто помог чтобы оригинальное имя файла сохранилoсь бы ?

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 12:51 18-01-2016
ManHunter



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Передаешь его параметром в загрузчик, делов-то.

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

Имя файла есть в свойствах объекта file, console.log в помощь.
 
в загрузчике получаешь его через $_GET['fname']

----------
"На любое мое движение ваша реакция предусмотрена,
В лучшем случае - равнодушие, в худшем случае - патология..." (C) Егор Летов

Всего записей: 3091 | Зарегистр. 20-03-2004 | Отправлено: 14:09 18-01-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
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>

 
 
upload.php

Код:
<?php  
 
function decodeURIComponent($str) { $str = preg_replace("/%u([0-9a-f]{3,4})/i","&#x\\1;",urldecode($str)); return html_entity_decode($str,null,'UTF-8');; }
 
 
    $input=fopen('php://input', 'rb');  
     $f=fopen(decodeURIComponent($_GET['fname']), 'w+');  
   
     while(!feof($input)) {  
         $data=fread($input,100000);  
         fwrite($f,$data);  
         unset($data);  
     }  
     fclose($input);  
 ?>


Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 15:28 18-01-2016
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
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>

 
upload.php:

Код:
<?php
for ($i=0; $i<count($_FILES["file"]["tmp_name"]); $i++) {
    if(is_uploaded_file($_FILES["file"]["tmp_name"][$i]))
    {
        if(preg_match("#\.(jpg|jpeg|png)$#i", $_FILES["file"]["name"][$i]))
        {
            move_uploaded_file($_FILES["file"]["tmp_name"][$i], "upload/". $_FILES["file"]["name"][$i]);
            echo $_FILES["file"]["name"][$i] ." - загружен!";
        }
        else
            echo $_FILES["file"]["name"][$i] ." - ошибка!";
    }
}
?>

 
хорошо передает файлы.
Только 1 нюанс, объем файла показываем средствами js не равен объему файла на сервере и реального размера (там примерно в 150-300 байт разбежность). Это можно как-то подправить?
И можно как-то в JS счетчик, разбить на каждый из файлов? Если загружать 3 файла одновременно, счетчик показывает для всех 3-х файлов общий размер. Хотелось-бы сделать чтоб при загрузке через for, прописывать типо:
 

Код:
'<div>Файл ' + file.name + ' загружается. Загрузка: ' + event.loaded + ' / ' + event.total + ' кб.</div>'

Если загружать 3 файла одновременно, вылазит 3 строчки, для каждого из файлов...

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 17:45 18-01-2016 | Исправлено: Sutar, 18:15 18-01-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

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

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

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 23:40 18-01-2016
Sutar



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

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 19:24 20-01-2016 | Исправлено: Sutar, 19:33 20-01-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
fread()

http://php.net/manual/de/function.fread.php
http://www.w3schools.com/php/func_filesystem_fread.asp
 
decodeURIComponent() в php
и encodeURIComponent() в JS
 
это для корректной передачи названий файла в Unicode

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 12:25 21-01-2016
Sutar



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

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 17:30 21-01-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
http://php.net/manual/ru/function.fread.php
 
fread() читает до length байт из файлового указателя handle. Чтение останавливается как только было достигнуто одно из следующих условий:  
&#9702; было прочитано length байт  
&#9702;  достигнут EOF (конец файла)  
&#9702; стал доступен пакет или произошел  таймаут сокета (для сетевых потоков)  
&#9702; если читаемый поток является буферизованным и не представляет собой обычный файл, то за один раз максимум читается количество байт, равное размеру одной порции данных (обычно это 8192), однако, в зависимости от ранее буферизованных данных размер возвращаемых данных может быть больше размера одной порции данных.
 
 
больше не знаю

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 20:27 21-01-2016
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
Спасибо. Но это я знаю и так)

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 20:55 21-01-2016 | Исправлено: Sutar, 21:46 21-01-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
пробовал в Firefox на XAMPP загружает файлы ~ max 1,35 GB
а IE 11 XAMPP Windows почему то стирает большие исходные файлы
 
Добавлено:
http://www.phplivex.com/ajax_file_upload.php

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 21:24 24-01-2016 | Исправлено: vs6262, 22:20 26-01-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
было бы интересным Multiupload решение
 
может кто поможет ?

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 22:25 26-01-2016 | Исправлено: vs6262, 22:29 26-01-2016
UTF32KG

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

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

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

Всего записей: 32 | Зарегистр. 02-09-2015 | Отправлено: 07:14 28-01-2016
Meer



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
и мне это пригодилось бы
+1

Всего записей: 1103 | Зарегистр. 12-08-2007 | Отправлено: 00:29 02-02-2016
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
<!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>
 

 
 
ajax-upload.php

Код:
<?php  
    $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);  
 ?>

 
сейчас пишет на сервере файл 0байт. может кто знает в чем причина ?

Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 18:51 14-02-2016 | Исправлено: vs6262, 00:06 15-02-2016
Ramzzes



Junior Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
А что бы не воспользоваться готовым решением?
Я в своих проектах plupload юзаю, крайне удобная библиотека.

Всего записей: 57 | Зарегистр. 03-07-2006 | Отправлено: 21:11 16-02-2016
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3

Компьютерный форум Ru.Board » Интернет » Web-программирование » Активные темы » Загрузка файла на сервер средствами XMLHttpRequest


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru