老师,没进度条

<!DOCTYPE html>

<html>

<head>

<title>拖拽文件上传案例</title>

margin: 0;

padding: 0;

}

.container{

width: 400px;

height: 300px;

margin: 100px auto;

border: 2px dashed black;

box-sizing: border-box;

overflow: auto;

}

.containerDrop{

border: 2px dashed blue;

}

.tips{

line-height: 290px;

text-align: center;

}

.file{

width: 100%;

height: 40px;

display: block;

position: relative;

list-style-type: none;

}

.text{

line-height: 40px;

font-size: 20px;

position: relative;

z-index: 2;

padding-left: 10px;

}

.progress{

position: absolute;

left: 0;

top: 0;

width: 10%;

height: 100%;

background-color: #B0E24B;

}

.loading,.right,.wrong{

width: 30px;

height: 30px;

display: inline-block;

vertical-align: middle;

padding-right: 10px;

}

.loading{

background: url(img/loading.png) no-repeat;

}

.right{

background: url(img/right.png) no-repeat;

}

.wrong{

background: url(img/wrong.png) no-repeat;

}

.none{

display: none;

}

</style>

</head>

<body>

<div id="tips" class="tips">拖动文件至此区域，即可上传</div>

</ul>

</li>

</div>

(function($){

$('#container').on('dragenter',function(e){

if(!$('#tips').hasClass('none')){

$('#tips').text('松开鼠标,即可上传');

}

$('#container').addClass('containerDrop');

}).on('dragleave',function(e){

if(!$('#tips').hasClass('none')){

$('#tips').text('拖动文件至此区域，即可上传');

}

$('#container').removeClass('containerDrop');

}).on('dragover',function(e){

e.preventDefault();

}).on('drop',function(e){

e.preventDefault();

if(!$('#tips').hasClass('none')){

$('#tips').addClass('none');

$('#files').removeClass('none');

};

$('#container').removeClass('containerDrop');

var files = e.originalEvent.dataTransfer.files;

for(var i=0;i<files.length;i++){

var file = files[i];

var li = $('#template li').clone();

var icon = li.find('.loading');

var name = li.find('.name');

var progress = li.find('.progress');

name.text(file.name);

$('#files').append(li);

//需要有后台的一个upload上传的接口

//upload(file,progress,icon);

//模拟的upload

simuUpload(file,progress,icon);

}

});

var simuUpload = function(file,progressEle,iconEle){

var progress = 0;

var timer = setInterval(function(){

var progress = progress + Math.floor(Math.random() * 3);

if(progress < 100){

progressEle.css('width', progress + '%');

}else{

clearInterval(timer);

progressEle.css('width', '0');

iconEle.removeClass('loading').addClass('right');

}

},100);

}

})(jQuery);

</script>

</body>

</html>

老师,看了好几遍也没看出来哪里写错了?像这种情况不太好检查出来,如何调试能够更快的找出问题呢

慕盖茨9092533 2019-09-29

源自：HTML5拖拽上传 6-2 拖拽文件上传案例JS（1）

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2019-09-29 18:06:43

同学你好，老师测试你的代码，可以看出一开始是有进度条的，而且也是可以上传成功的，示例：

这个时候，就可以分析一下原因，其他部分代码应该是没有问题，否则程序会报错，那么出错的原因应该就是在进度条计算这里哦。检查代码可以发现，在定时器中再次使用var声明了progress变量，导致没执行一次定时器，progress都会重新赋值了，所以无法显现效果。

建议修改：

多练习，多总结解决问题的思路和方法，举一反三，慢慢积累，那么以后再出现问题，就可以很快的定位问题所在了。

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

慕盖茨9092533 提问者 #1

谢谢老师，还有一个小bug，把文件拖进目标区域的时候，刚开始以及之后都会有偶尔几次，文件拖进去之后边框颜色和里面文字没有改变，是我的哪里代码有问题嘛

2019-09-29 19:57:06
好帮手慕慕子回复提问者慕盖茨9092533 #2

同学你好，老师又测试了一下你的代码，代码是正确的，效果实现也是可以的哦，祝学习愉快~~~~

2019-09-30 09:41:04