使用带有进度条和附加字段的核心 JavaScript 上传 Ajax 文件答案

【问题标题】：Ajax file upload using core JavaScript with progress bar and additional fields使用带有进度条和附加字段的核心 JavaScript 上传 Ajax 文件
【发布时间】：2019-04-16 05:15:09
【问题描述】：

我们如何使用带有一些附加参数和进度条的 ajax 请求上传文件。

【问题讨论】：

我添加此问题是为了分享我对此类查询的答案。
问题和答案都应该独立存在，而且问题目前过于宽泛且不清楚。发布问题时，您应该发布带有问题的自我回答
@CertainPerformance 是的，我已经发布了我的问题的答案，由于某些问题我无法同时上传它们，但现在您可以查看我的答案。

标签： javascript ajax file-upload progress-bar

【解决方案1】：

我们可以使用带有 XHR 的核心 JavaScript 发出 ajax 请求来上传文件。创建以下文件：

/* ** 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>

通过运行上面的代码，您将在您的 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。你的回答对我帮助很大。