Multiple File Upload

Yes

https://www.youtube.com/results?search_query=progress+bar+in+php+file+upload

https://www.google.com/search?q=progress+bar+file+upload

@SERGIU17 - Need code for Multiple File Upload

@FAIZANAHMED786 - Trust me, if I paste code here, on your side won't work, you will have errors, and you will not be sure what to do next, and you will ask what to do and what to change.

I already tried to help one person with the same problem Multiple file upload, but he had errors

Also on google

site:laracasts.com multiple file upload progress bar

As example one hit was https://laracasts.com/discuss/channels/javascript/ajax-upload-files-progress-bar

But many more.

@SERGIU17 - I have pasted my code below. I am working on Laravel Framework. I have already developed controller for file uploading. The only problem I am getting is cancelling the multiple files and dont know about how to hold files temporary in javascript. Can you please edit the complete code below.

$(document).ready(function () { $('input[type=file]').change(function () { $('#btnUpload').show(); $('#divFiles').html(''); for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically var fileId = i; $("#divFiles").append('' + '' + '' + '' + '' + '' + '' + '' + ' ' + '' + '' + '' + ' ' + ''); } }) }); // Upload File

function uploadFiles() {

var file = document.getElementById("fileUploader")//All files for (var i = 0; i < file.files.length; i++) { uploadSingleFile(file.files[i], i); } }

function uploadSingleFile(file, i) { var fileId = i; var ajax = new XMLHttpRequest(); //Progress Listener ajax.upload.addEventListener("progress", function (e) { var percent = (e.loaded / e.total) * 100; $("#status_" + fileId).text(Math.round(percent) + "% uploaded, please wait..."); $('#progressbar_' + fileId).css("width", percent + "%") $("#notify_" + fileId).text("Uploaded " + (e.loaded / 1048576).toFixed(2) + " MB of " + (e.total / 1048576).toFixed(2) + " MB "); }, false); //Load Listener ajax.addEventListener("load", function (e) { $("#status_" + fileId).text(event.target.responseText); $('#progressbar_' + fileId).css("width", "100%")

        //Hide cancel button
        var _cancel = $('#cancel_' + fileId);
        _cancel.hide();
    }, false);
    //Error Listener
    ajax.addEventListener("error", function (e) {
        $("#status_" + fileId).text("Upload Failed");
    }, false);
    //Abort Listener
    ajax.addEventListener("abort", function (e) {
        $("#status_" + fileId).text("Upload Aborted");
    }, false);

    ajax.open("POST", "/api/upload/UploadFiles"); // Your API .net, php

    var uploaderForm = new FormData(); // Create new FormData
    uploaderForm.append("file", file); // append the next file for upload
    ajax.send(uploaderForm);

    //Cancel button
    var _cancel = $('#cancel_' + fileId);
    _cancel.show();

    _cancel.on('click', function () {
        ajax.abort();
    })
}


</script>

@JLRDW - I have pasted my code below. I am working on Laravel Framework. I have already developed controller for file uploading. The only problem I am getting is cancelling the multiple files and dont know about how to hold files temporary in javascript. Can you please edit the complete code below.

$(document).ready(function () { $('input[type=file]').change(function () { $('#btnUpload').show(); $('#divFiles').html(''); for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically var fileId = i; $("#divFiles").append('' + '' + '' + '' + '' + '' + '' + '' + ' ' + '' + '' + '' + ' ' + ''); } }) }); // Upload File

function uploadFiles() { var file = document.getElementById("fileUploader")//All files for (var i = 0; i < file.files.length; i++) { uploadSingleFile(file.files[i], i); } }

function uploadSingleFile(file, i) { var fileId = i; var ajax = new XMLHttpRequest(); //Progress Listener ajax.upload.addEventListener("progress", function (e) { var percent = (e.loaded / e.total) * 100; $("#status_" + fileId).text(Math.round(percent) + "% uploaded, please wait..."); $('#progressbar_' + fileId).css("width", percent + "%") $("#notify_" + fileId).text("Uploaded " + (e.loaded / 1048576).toFixed(2) + " MB of " + (e.total / 1048576).toFixed(2) + " MB "); }, false); //Load Listener ajax.addEventListener("load", function (e) { $("#status_" + fileId).text(event.target.responseText); $('#progressbar_' + fileId).css("width", "100%")

    //Hide cancel button
    var _cancel = $('#cancel_' + fileId);
    _cancel.hide();
}, false);
//Error Listener
ajax.addEventListener("error", function (e) {
    $("#status_" + fileId).text("Upload Failed");
}, false);
//Abort Listener
ajax.addEventListener("abort", function (e) {
    $("#status_" + fileId).text("Upload Aborted");
}, false);

ajax.open("POST", "/api/upload/UploadFiles"); // Your API .net, php

var uploaderForm = new FormData(); // Create new FormData
uploaderForm.append("file", file); // append the next file for upload
ajax.send(uploaderForm);

//Cancel button
var _cancel = $('#cancel_' + fileId);
_cancel.show();

_cancel.on('click', function () {
    ajax.abort();
})

}