JSFiddle - React, Tailwind, and code Playground

by Paul Lan

HTML

<div class="container">
     <h3>FormData multiple file upload with AJAX Level2</h3>

    <p>
        <form id="demo_form" src="./">
            <input type="hidden" value="A hidden input" name="hiddenInput" />
            <input id="demo_file_input" type="file" multiple class="btn btn-primary ng-scope" name="filesToUpload" id="file_uploader">Select File</input>
            <br />
            <br />
            <input type="submit" id="submit" class="btn btn-primary ng-scope" />
        </form>
        <hr />
         <h4>File list</h4>

        <div id="demo_file_list"></div>
        <hr />
         <h4>Form Data</h4>

        <div id="demo_form_data"></div>
    </p>
    <hr />
     <h4>Reference:</h4>

    <ul>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">FormData</a>
        </li>
        <li><a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">Shadow Dom</a>
        </li>
    </ul>
</div>
<!-- /container -->

CSS

/* Put your css in here */
 input[type="file"]::-webkit-file-upload-button {
    display:inline-block;
    padding: 10px;
    color:white;
    border-radius: 10px;
    -webkit-appearance:none;
    background: #d0e4f7;
    /* Old browsers */
    cursor: pointer;
    background: linear-gradient(to bottom, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    /* W3C */
}

JavaScript

// Add your javascript here
$(function () {
    var $form = $('#demo_form');
    var $fileInput = $('#demo_file_input');
    var $fileList = $('#demo_file_list');
    var $formData = $('#demo_form_data');
    var $submit = $('#submit');


    $fileInput.change(function () {
        var $this = $(this);
        var files = this.files;

        var innerHtml = '<li><br />';

        for (var i = 0; i < files.length; i++) {
            innerHtml += '<lable>File ' + i + ': </label>';
            innerHtml += '<br /><b>File name:</b> ' + files[i].name;
            innerHtml += '<br /><b>File size:</b> ' + files[i].size + 'B';
            innerHtml += '<br/>'
        }
        innerHtml += '</li><hr />';

        $fileList.append(innerHtml);



    });

    $form.submit(function () {
        // serialize to form data
        var formData = new FormData($form[0]);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "./");
        var progress = {};
        $formData.html('<div>Progress: <span id="progress"></span></div>');

        var updateProgress = function (oEvent) {
            if (oEvent.lengthComputable) {
                var percentComplete = oEvent.loaded * 100 / oEvent.total
                $('#progress').text(percentComplete + '%')
            }


            //var percentComplete = oEvent.loaded * 100 / fileSizes
            //$('#progress').text( percentComplete + '%' )


        };
        xhr.upload.onprogress = updateProgress;

        updateProgress({
            loaded: 0
        });


        xhr.send(formData);

        $formData.append("<p style='color:red'>Please Observe AJAX post via Debugger Tools of Chrome.</p>")

        return false;
    });

    // if you want to change the shadow dom, uncomment the following block
    //var host = $($fileInput[0].webkitCreateShadowRoot && $fileInput[0].webkitCreateShadowRoot()) || $()
    //host[0].innerHTML = '<input pseudo="-webkit-file-upload-button">Greate multiple file selector: Select...