Загрузка файла Ajax с использованием основного JavaScript с индикатором выполнения и дополнительными полями

Как мы можем загрузить файл с помощью ajax-запроса с некоторыми дополнительными параметрами и индикатором выполнения.

Я добавил этот вопрос, чтобы поделиться своим ответом на этот тип запросов.

— 16.04.2019 07:25

И вопрос, и ответ должны стоять сами по себе, и в настоящее время вопрос слишком широк и неясен. Вы должны опубликовать ответ с вопросом, когда вы публикуете вопрос

— 16.04.2019 07:27

@CertainPerformance Да, я отправил ответ на свой вопрос, из-за какой-то проблемы я не смог загрузить их одновременно, но теперь вы можете проверить мой ответ.

— 16.04.2019 07:33

javascript ajax file-upload progress-bar

16.04.2019 07:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

242

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мы можем сделать запрос ajax, используя основной JavaScript с XHR для загрузки файлов. Создайте следующие файлы:

/* ** upload.js ** */
var submit = document.getElementById('submit'), 
file = document.getElementById('file'), 
title = document.getElementById('title');
progress = document.getElementById('progress');

var upload = function(){

    if (file.files.length === 0){
        return;
    }

    var data = new FormData();
    data.append('title', title.value);
    data.append('SelectedFile', file.files[0]);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function(){
        if (request.readyState == 4){
            try {
                var resp = JSON.parse(request.response);
            } catch (e){
                var resp = {
                    status: 'error',
                    data: 'Unknown error occurred: [' + request.responseText + ']'
                };
            }
            console.info(resp.status + ': ' + resp.data);
        }
    };

    request.upload.addEventListener('progress', function(e){
        var progress_width = Math.ceil(e.loaded/e.total * 100) + '%';
        progress.style.width = progress_width;
    }, false);

    request.open('POST', 'save.php');
    request.send(data);
}

submit.addEventListener('click', upload);

/* ** style.css ** */
.container {
    width: 500px;
    margin: 0 auto;
}
.progress_outer {
    border: 1px solid #000;
}
.progress {
    width: 0%;
    background: #DEDEDE;
    height: 20px;  
}

<!-- ** index.html ** -->
<!doctype html>
<html>
<head>
    <meta charset = "utf-8">
    <title>JS File Upload with Progress</title>
    <link rel = "stylesheet" href = "style.css">
</head>
<body>
    <div class='container'>
        <p>
            Enter Title: <input type='text' id='title'>
        </p>
        <br/>
        <p>
            Select File: <input type='file' id='file'>
        </p>
        <br/>
        <input type='button' id='submit' value='Upload File'>
        <div class='progress_outer'>
            <div id='progress' class='progress'></div>
        </div>
    </div>
    <script src='upload.js'></script>
</body>
</html>

Запустив приведенный выше код, вы получите значение поля файла и заголовка в вашем php-файле, как показано ниже:

print_r($_FILES);   // for get file
print_r($_REQUEST);   // for get additional fields

Выход

Array
(
    [SelectedFile] => Array
        (
            [name] => 3400_1_1552283374.pdf
            [type] => application/pdf
            [tmp_name] => D:\xamp\tmp\php6D08.tmp
            [error] => 0
            [size] => 500320
        )

)
Array
(
    [title] => title
)

Спасибо @AmitKumar. Ваш ответ мне очень помог.

— 17.04.2019 14:25

16.04.2019 07:19