File "code.html"

Full Path: /home/analogde/www/Design/fileman/Fusion/upload_file/004/code.html
File size: 1.36 KB
MIME-type: text/html
Charset: utf-8

<script>


function uploadFile() {
    var fileInput = document.getElementById('fileUpload');
    var file = fileInput.files[0];

    if (file) {
        var formData = new FormData();
        formData.append('file', file);

        var xhr = new XMLHttpRequest();

        xhr.upload.addEventListener('progress', function (event) {
            if (event.lengthComputable) {
                var percent = Math.round((event.loaded / event.total) * 100);
                var progressBar = document.getElementById('progressBar');
                progressBar.style.width = percent + '%';
                progressBar.innerHTML = percent + '%';
            }
        });

        xhr.addEventListener('load', function (event) {
            var uploadStatus = document.getElementById('uploadStatus');
            uploadStatus.innerHTML = event.target.responseText;
        });

        xhr.open('POST', 'upload.php', true);
        xhr.send(formData);
    }
}

</script>    

<div class="phppot-container tile-container text-center">
    <h2>AJAX File Upload with Progress Bar using JavaScript</h2>
    <input type="file" id="fileUpload" />
    <br>
    <br>
    <button onclick="uploadFile()">Upload</button>
    <div class="progress">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    <br>
    <div id="uploadStatus"></div>
</div>