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 fileSizes = 10;
  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++) {
      fileSizes += files[i].size;
      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: <p id="progress"></p></div>');
    
    var updateProgress = function(oEvent) {

      var percentComplete = oEvent.loaded / fileSizes
      $('#progress').text( percentComplete + '%' )
      
      
    };
    xhr.addEventListener('progress',updateProgress, false);
    
    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 file</input>';


})