-5
私はフィドルに成功、それを実行します。http://jsfiddle.net/donhuvy/hfq4ycvs/私のソースコードがうまくいかないのはなぜですか？
が、私はローカルで（progress_bar.htmlファイル）それを実行すると、何も起こりません。
<!DOCTYPE html>
<html>
<head>
<title>progress bar...</title>
<style type="text/css">
.progress {
display: block;
text-align: center;
width: 0;
height: 3px;
background: red;
transition: width .3s;
}
.progress.hide {
opacity: 0;
transition: opacity 1.3s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var data = [];
for (var i = 0; i < 100000; i++) {
var tmp = [];
for (var i = 0; i < 100000; i++) {
tmp[i] = 'hue';
}
data[i] = tmp;
}
;
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded/evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('.progress').addClass('hide');
}
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded/evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
type: 'POST',
url: "/echo/html",
data: data,
success: function (data) {
}
});
});
</script>
</head>
<body>
<div class="progress"></div>
</body>
</html>
ファイルはどこに置かれましたか？ローカルサーバー上で??? –
WAMPのようなローカルサーバーをインストールしていることを確認してください。 – sabith
コンソールでエラーメッセージを確認してください。他の人が言っているように、ローカルWebサーバーを使ってテストしたり、/ echo/htmlへのajax呼び出しを修正したりするべきです。 – Dylan