<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传 jquery上传</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
<style type="text/css">
.message-input-file {
position: relative;
display: inline-block;
width: 100px;
height: 30px;
margin-top: 4px;
border-radius: 5px;
text-align: center;
border: 1px solid green;
font-size: 16px;
line-height: 30px;
color: green;
cursor: pointer;
display: flex;
align-items: center;
}
.iconupload{
background-image: url(http://bpic.588ku.com/element_origin_min_pic/00/92/79/7856f23705c36e1.jpg!rw400);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: inline-block;
width: 24px;
height: 24px;
vertical-align :auto;
}
.selected-btn {
position: absolute;
opacity: 0;
width: 155px;
left: 0;
display: none;
}
.document-headline {
position: relative;
padding-left: 025px;
}
.documnet-text {
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.documnet-icon {
width: 20px;
height: 20px;
background-image: url(http://bpic.588ku.com/element_origin_min_pic/00/36/49/1456d5027ea1c98.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
top: 0px;
left: 0px;
}
.progress-line {
position: absolute;
bottom: 0;
z-index: 2;
width: 0%;
height: 2px;
background-color: #095F93;
}
.progress-line-back {
position: absolute;
bottom: -2px;
width: 100%;
height: 3px;
background-color: #f5f5f5;
}
.delete-icon {
font-size: 20px;
margin-left: 10px;
background-image: url(http://bpic.588ku.com/element_origin_min_pic/18/06/10/3b5a687077f1af017e8f1f6e6ebdc7d5.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
top: 0px;
right: -30px;
}
.line-box {
margin-top: 20px;
width: 300px;
}
.uploading-done{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="correct-message uploading-doucuments-list clearfix">
<label class="message-input-file pull-left" for="uploading-file">
<i class="iconfont iconupload"></i>
<span>选择文件</span>
<input type="file" class="selected-btn" id="uploading-file" name="">
</label>
<div class="uploading-done pull-left">
</div>
</div>
</body>
<script>
$(function () {
var upBtnIndex = 0;
var filess = []
var upBtnIndex = 0;
$('.selected-btn').change(function () {
for (let i = 0; i < $(this)[0].files.length; i++) {
filess.push($(this)[0].files);
sindex = $('.uploading-done').eq(upBtnIndex).find('.progress-line').length;
progressBar(upBtnIndex, sindex, $(this)[0].files[i].name);
$('.message-input-file').removeClass('warn');
}
console.log(filess)
});
// 模拟进度
function progressBar(findex, sindex, name) {
var max = 100;
var init = 0;
var uploaded;
$('.uploading-done').eq(findex).show();
$('.uploading-done').eq(findex).append(
'<div class="line-box clearfix"><div class="document-headline pull-left"><div class="documnet-icon pull-left"></div><div class="documnet-text pull-left">' +
name +
'</div><div class="delete-icon pull-right">+</div><div class="progress-line-back"><div class="progress-line" style="width: ' +
init + '%;"></div></div></div></div></div>')
var test = setInterval(function () {
init += 5;
uploaded = init + '%';
$('.uploading-done').eq(findex).find('.line-box').eq(sindex).find('.progress-line')
.css({
width: uploaded
});
if (init === 100) {
clearInterval(test);
let overTest = setTimeout('$(".uploading-done").find(".line-box").eq(' + (
sindex - 1) + ').find(".progress-line").css({ width: "100%" })',
200)
let overTestBack = setTimeout('$(".uploading-done ").find(".line-box").eq(' + (
sindex) + ').find(".progress-line-back").hide()', 400)
}
}, 100);
}
$('.correct-message').on('click', '.delete-icon', function () {
filess.splice($(this).parent().parent().index(), 1);
$(this).parent().parent().remove();
console.log(filess)
});
})
</script>
</html>
2020-05-30 上传文件
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
