Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2021, 10:20
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 49

Не получать сделать загрузку файла с прогрессом при нажатии Submit?
Нашла в интернете исходники где сделано загрузку файла. В консоле отображается прогресс (сколько в процентах загрузилось). Все это происходит при изменении поле input (change), вот пример кода.
<input type="file" name="afile" id="afile"/>


<script>

document.querySelector('#afile').addEventListener('change', function(e) 
{
//document.getElementById('upload-form').addEventListener('submit', function(e)( 
 e.preventDefault();
//document.querySelector('#afile').addEventListener('change', function(e) {
  var file = this.files[0];

  var fd = new FormData();
  fd.append("afile", file);
  // These extra params aren't necessary but show that you can include other data.
  fd.append("username", "Groucho");
  fd.append("accountnum", 123456);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handle_file_upload.php', true);
  
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    }
  };

  xhr.onload = function() {
   console.log(this.responseText);
   // if (this.status == 200) {
    //  var resp = JSON.parse(this.response);

     // console.log('Server got:', resp);

    //  var image = document.createElement('img');
    //  image.src = resp.dataUrl;
    //  document.body.appendChild(image);
    //};
  };

  xhr.send(fd);
}, false);
</script>

</body>
</html>


Код выше работает. Пытаюсь его переделать, чтобы все это происходило через нажатии кнопки submit, но почему-то ничего не происходит файл не грузится, мой переделанный код.

<form method="post" name="upload" id="upload-form"><div>
<input type="file" name="afile" id="afile"/>
<input class="in_input" type="submit" value="Загрузить"></div>
</form>  

<script>

document.getElementById('upload-form').addEventListener('submit', function(e)
{
console.log("Test");
 var file = this.files[0];

  var fd = new FormData();
  fd.append("afile", file);
  // These extra params aren't necessary but show that you can include other data.
  fd.append("username", "Groucho");
  fd.append("accountnum", 123456);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handle_file_upload.php', true);
  
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    }
  };
  
   xhr.onload = function() {
   console.log(this.responseText);
   // if (this.status == 200) {
    //  var resp = JSON.parse(this.response);

     // console.log('Server got:', resp);

    //  var image = document.createElement('img');
    //  image.src = resp.dataUrl;
    //  document.body.appendChild(image);
    //};
  };

   xhr.send(fd);
}, false);
</script>

</body>
</html>


Как можно исправить, чтобы при выборе файла и нажатии submit он грузился в папку?
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2021, 11:53
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

e.preventDefault();
var file = this.afile.files[0];
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2021, 12:31
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 49

Понятно
Цитата:
var file = this.myfile.files[0];
, это получение файла input, чтобы загрузить его, а если у меня будут еще текстовые поля как их получить чтобы передать на сервер?
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2021, 21:01
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

Olga27,
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>

<form id="formX" action="upload.php" method="post" enctype="multipart/form-data">
    <input id="textX" type="text" name="textX" value="" required>
    <input id="fileX" type="file" name="fileX" value="" required>
    <input id="buttonX" type="submit" value="Submit">
    <progress id="progressX" max="100" value="0"></progress>
    <div id="responseX"></div>
</form>

<script>
document.querySelector('#formX').addEventListener('submit', function(e) {
    //return; // Displaying upload.php
    e.preventDefault();
 
    var formData = new FormData(this), // this = form
        progress = this.querySelector('#progressX'),
        response = this.querySelector('#responseX');

    //formData.append('formId', this.id); // Extra fields
    progress.value = 0;
    response.innerHTML = 'Uploading...';
 
    var xhr = new XMLHttpRequest();
    xhr.open(this.method, this.action, true);
    //xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // Detecting AJAX
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) { 
            progress.value = (e.loaded / e.total) * 100;
        }
    };
    xhr.onload = function() {
        if (this.status == 200) {
            response.innerHTML = this.responseText;
        } else {
            response.innerHTML = 'Server error!';
        }
    };
    xhr.onerror = function() {
        response.innerHTML = 'Network error!';
    };
    xhr.send(formData);

    // PHP variables: $_POST['textX'], $_FILES['fileX']
    // Optional: $_POST['formId'], $_SERVER['HTTP_X_REQUESTED_WITH']
});
</script>

</body>
</html>

Последний раз редактировалось Rise, 06.07.2021 в 21:05.
Ответить с цитированием
  #5 (permalink)  
Старый 07.07.2021, 09:17
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 49

При нажатии кнопки если поля пустые то появляется сообщение "заполните поле" и выберите файл, а как добавить еще одно условие например чтобы можно было загружать файлы не больше определенного размера к примеру 50 мб.
Ответить с цитированием
  #6 (permalink)  
Старый 07.07.2021, 10:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от Olga27
а как добавить еще одно условие например чтобы можно было загружать файлы не больше определенного размера к примеру 50 мб.
Пример работы с полем file...
<input class="input" id="uploadInput" type="file">
<div id="e-fileinfo"></div>

<script>
function updateSize() {
	var file = document.getElementById("uploadInput").files[0],
	ext = "не определилось",
	parts = file.name.split('.');
	if (parts.length > 1) ext = parts.pop();
	document.getElementById("e-fileinfo").innerHTML = [
		"Размер файла: " + file.size + " B",
		"Расширение: " + ext,
		"MIME тип: " + file.type
	].join("<br>");
}

document.getElementById('uploadInput').addEventListener('change', updateSize);
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 07.07.2021, 12:57
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

Olga27, изи
document.querySelector('#fileX').addEventListener('change', function(e) {
    this.setCustomValidity('');
    for (var i = 0; i < this.files.length; i++) {
        if (this.files[i].size / (1024 * 1024) > 50) {
            this.setCustomValidity('Maximum file size 50 MB');
            break;
        }
    }
    if (this.reportValidity) this.reportValidity();
});

ksa, в Хром, если в окне выбора файла нажать Отмена, то files.length будет 0.
Ответить с цитированием
  #8 (permalink)  
Старый 07.07.2021, 15:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от Rise
если в окне выбора файла нажать Отмена, то files.length будет 0
Добавить тогда проверку... Всего делов.
Мой пример лишь иллюстрация того, где и какие данные по файлу можно взять.
Пример не обязан отрабатывать все "аварийные" условия...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать плавный переход картинок при нажатии на стрелки Antonjrjr Элементы интерфейса 3 03.05.2017 10:30
Как сделать непрерывное воспроизведение mp3 файла, при переходе на другие страницы Greatest_Duke jQuery 0 24.12.2016 14:50
ipad, как сделать немигающее поле при нажатии Floyd (X)HTML/CSS 0 23.10.2015 12:03
Как сделать проверку всех полей формы при нажатии кнопки sss2019 Общие вопросы Javascript 2 04.01.2014 02:00
при нажатии на раздел меню поворачивается маркер Сергей545 Элементы интерфейса 5 08.12.2013 22:15