// 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 file</input>'; })
<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 -->
/* 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 */ }