Click here to Skip to main content
15,938,122 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have to create an upload script who contains five input to choose the file to upload

this is the html code
<pre><form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
	 <input type="file" name="file1" id="file1">
	  <input type="file" name="file2" id="file2">

    <input type="submit" value="Upload">
    <progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>

    document.getElementById('uploadForm').onsubmit = function(event) {
        event.preventDefault(); // Prevent the form from submitting the traditional way

    function _(el) {
        return document.getElementById(el);

    function uploadFile() {
        var file = _("file").files[0];
        var formdata = new FormData();
        formdata.append("file", file);
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);"POST", "upload.php");

    function progressHandler(event) {
        _("loaded_n_total").innerHTML = "Uploaded " + event.loaded/1000000 + " Mo of " +;
        var percent = (event.loaded / * 100;
        _("progressBar").value = Math.round(percent);
        _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";

    function completeHandler(event) {
        _("status").innerHTML =;
        _("progressBar").value = 0; // Reset progress bar after completion

    function errorHandler(event) {
        _("status").innerHTML = "Upload Failed";

    function abortHandler(event) {
        _("status").innerHTML = "Upload Aborted";


and this the upload.php code

    if (isset($_FILES['file']) && $_FILES['file']['error'] == UPLOAD_ERR_OK) {
        $uploadDir = 'uploads/';
        $uploadFile = $uploadDir . basename($_FILES['file']['name']);
        if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
            echo "File successfully uploaded!";
        } else {
            echo "Possible file upload attack!";
    } else {
        echo "No file uploaded or upload error.";

when i upload the progress work but only the first file added in input was uploaded
How can i please resolve this issue

What I have tried:

upload multiple input files with progressbar

1 solution

function uploadFile() {
    var file = _("file").files[0];
    var formdata = new FormData();
    formdata.append("file", file);
Your uploadFile function explicitly only sends the first file from the first input. If you want to upload files from multiple inputs, then you need to append each of them to the FormData object:
var formdata = new FormData();

var file = _("file");
for (var i = 0; i < file.files.length; i++) {
    formdata.append("file", file.files[i]);

file = _("file1");
for (var i = 0; i < file.files.length; i++) {
    formdata.append("file1", file.files[i]);

file = _("file2");
for (var i = 0; i < file.files.length; i++) {
    formdata.append("file2", file.files[i]);

But the obvious question is why you need five separate file input which accept a single file each, rather than a single file input with the multiple attribute applied:
multiple - <input type="file"> - HTML: HyperText Markup Language | MDN[^]
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900