上傳圖片展現進度條 bootstrap

時間 2019-11-05

原文原文鏈接

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>Bootstrap 實例 - 條紋的進度條</title>  <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-fileinput/4.3.3/css/fileinput.min.css" rel="stylesheet">  <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.3/js/fileinput.min.js"></script>  <script type="text/javascript">    $(document).ready(function () {      alert("hello");      $("#input-b2").change(function () {        console.log("hi");      });      $("#input-b2").bind("change", function () {        console.log("hello");        var fileObj = document.getElementById("input-b2").files[0];        var form = new FormData();        form.append("file", fileObj);        /*  $("#packUrlDiv").html("正在上傳...");*/        $.ajax({          url: '上傳服務地址',          type: 'POST',          data: form,          cache: false,          processData: false,          contentType: false,          xhr: xhrOnProgress(function (e) {            var percentDouble = e.loaded / e.total;//文件上傳百分比            var percent = parseInt(percentDouble * 100);            console.log(percent);            if (percent <= 100) {              $("#progressBarDiv").attr("style", "width:" + percent + "%");              $("#progressBarDiv").html(percent + "%");            } else {            }            console.log(percent);          }),          success: function (data) {            console.log(data);            var map = data;            console.log(map.result.url);          }        })      });      var xhrOnProgress = function (fun) {        xhrOnProgress.onprogress = fun; //綁定監聽        //使用閉包實現監聽綁        return function () {          //經過$.ajaxSettings.xhr();得到XMLHttpRequest對象          var xhr = $.ajaxSettings.xhr();          //判斷監聽函數是否爲函數          if (typeof xhrOnProgress.onprogress !== 'function')            return xhr;          //若是有監聽函數而且xhr對象支持綁定時就把監聽函數綁定上去          if (xhrOnProgress.onprogress && xhr.upload) {            xhr.upload.onprogress = xhrOnProgress.onprogress;          }          return xhr;        }      }    });  </script></head><body><input id="input-b2" name="input-b2" type="file" showPreview="false" class="file" data-browse-on-zone-click="true"><button id="btnUp" name="btnUp" type="button" class="btn btn-primary">上傳</button><button type="button" class="btn btn-primary">原始</button><div class="progress progress-striped">  <div class="progress-bar progress-bar-success" role="progressbar"       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       style="width: 0%;" id="progressBarDiv">    <span class="sr-only"></span>  </div></div></body></html>