提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

上传图片 展示进度条 bootstrap

Bootstrap上传 图片 展示 进度条
2023-09-14 09:03:39 时间 
<!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>

相关文章