在没有 JavaScript 上传的情况下显示文件上传进度

Question

我有一个常规的 HTML 表单，可以将几张大图片发布到网站。

是否可以使用 JavaScript 来监控上传过程的速度？我不想使用XMLHttpRequest 或 jQuery 上传文件。

基本的 HTML 是一个表单、一些文件、一个按钮和一个进度条。

<form id="fileform" action="/add.php" enctype="multipart/form-data" method="post" onsubmit="true;">
    <input id="photoFile1" name="userfile1" type="file" accept="image/jpeg" />
    <input id="photoFile2" name="userfile2" type="file" accept="image/jpeg" />
    <input type="submit" name="submitButton" id="submitButton" value="Upload"/>
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
</form>

单击按钮后，我可以计算文件大小：

var fileSize = document.getElementById("photoFile1").files[0].size + document.getElementById("photoFile2").files[0].size

如何监控浏览器发送了多少字节，以便更新progress栏？

• 我查看了jQuery Upload，但这需要我使用 JavaScript 进行 POST。这意味着要改变我网站的架构。
• “Can somehow show progress on file upload without using AJAX?”有一个类似的问题，但它已有 8 年历史且未得到解答。

Answer 1

你不能。浏览器不提供任何 API 来实现这一点。