<!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", "" + 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=" 0%;" id="progressBarDiv">
<span class="sr-only"></span>
</div>
</div>
</body>
</html>