Last active
April 15, 2018 00:19
-
-
Save Dodotree/d984877b3bd8aed4cdec0282a87f7e23 to your computer and use it in GitHub Desktop.
Simple bootstrap4 file uploader with progress bar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Bootstrap file loader with progress bar</title> | |
| <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" | |
| <div class="progress fade"> | |
| <div class="progress-bar bg-info" role="progressbar" style="width: 0%;" | |
| aria-valuenow="0" | |
| aria-valuemin="0" | |
| aria-valuemax="100">0%</div> | |
| </div> | |
| <div class="input-group mb-3"> | |
| <div class="custom-file"> | |
| <input type="file" class="custom-file-input" id="source"> | |
| <label class="custom-file-label" for="source">Choose file</label> | |
| </div> | |
| <div class="input-group-append"> | |
| <span class="input-group-text" id="upload-file-btn">Upload</span> | |
| </div> | |
| </div> | |
| <script src="node_modules/jquery/dist/jquery.min.js"></script> | |
| <!-- script src="node_modules/popper.js/dist/popper.min.js"></script --> | |
| <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> | |
| <script> | |
| function submitFile(){ | |
| $(".progress").addClass("show in"); | |
| var formData = new FormData(); | |
| var files = $("#source").get(0).files; | |
| $.each( files, function(i, file){ | |
| formData.append("uploads[" + i + "]", file); | |
| }); | |
| // formData.append("upload[name]", $("#source-name").value); | |
| $.ajax({ | |
| xhr: function() { | |
| var xhr = $.ajaxSettings.xhr(); | |
| // upload | |
| xhr.upload.onprogress = function(evt){ | |
| if (evt.lengthComputable) { | |
| var percentComplete = Math.round(evt.loaded / evt.total * 100); | |
| console.log(percentComplete); | |
| $('.progress-bar') | |
| .css('width', percentComplete +'%') | |
| .attr('aria-valuenow', percentComplete) | |
| .html(percentComplete +'%'); | |
| if( percentComplete >= 100 ){ | |
| $('.progress-bar').css('width', '0%').attr('aria-valuenow', 0).html('0%'); | |
| $(".progress").removeClass("show in"); | |
| } | |
| } | |
| } | |
| // download | |
| xhr.onprogress = function(evt){ | |
| if (evt.lengthComputable) { | |
| var percentComplete = evt.loaded / evt.total; | |
| } | |
| } | |
| return xhr; | |
| }, | |
| type: 'POST', | |
| enctype:"multipart/form-data", | |
| contentType: false, | |
| cache: false, | |
| processData: false, | |
| url: "", | |
| data: formData, | |
| success: function(data){ | |
| data = ('string' == typeof(data))? $.parseJSON(data) : data; | |
| if('undefined' != typeof(data.success)){ | |
| reloadTable(data.success.ids); | |
| } | |
| }, | |
| error: function(a,b,c){} | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment