I have a regular HTML form which POSTs several large images to a website.
Is it possible to use JavaScript to monitor how quick the upload process is? I don't want to upload the files using XMLHttpRequest or jQuery.
The basic HTML is a form, some files, a button, and a progress bar.
<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>
Once the button is clicked, I can calculate the file size:
var fileSize = document.getElementById("photoFile1").files[0].size + document.getElementById("photoFile2").files[0].size
How can I monitor how many bytes have been sent by the browser, so that I can update the progress bar?
- I've looked at jQuery Upload but that requires me to POST using JavaScript. Which would mean changing the architecture of my site.
- There is a similar question at " Can somehow show progress on file upload without using AJAX? "- but it is 8 years old and unanswered.