Блог

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

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

#javascript #ajax #file-upload #progress-bar

#javascript #аякс #загрузка файла #индикатор выполнения

Вопрос:

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

Комментарии:

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

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

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

Ответ №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.log(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>

Выполнив приведенный выше код, вы получите значение поля file и title в вашем 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:xamptmpphp6D08.tmp
            [error] => 0
            [size] => 500320
        )

)
Array
(
    [title] => title
)

Комментарии:

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

2. хороший способ , я им хорошо пользуюсь