<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
<title>多文件带进度条上传</title>
<style type="text/css">
*{
font-family: 'microsoft yahei';
color: #4A4A4A;
}
.upload{
width: 750px;
padding: 15px;
border: 1px dashed #ccc;
margin: 25px auto;
border-radius: 5px;
}
.uploadBox{
width: 100%;
height: 35px;
/*background: #F0F0F0;*/
position: relative;
}
.uploadBox input{
height: 30px;
background: red;
position: absolute;
top: 2px;
left: 0;
z-index: 201;
opacity: 0;
cursor: pointer;
}
.uploadBox .inputCover{
width: 100px;
height: 30px;
position: absolute;
top: 2px;
left: 0;
z-index: 200;
text-align: center;
line-height: 30px;
font-size: 14px;
border: 1px solid #009393;
border-radius: 5px;
cursor: pointer;
}
.uploadButton{
width: 100px;
height: 30px;
position: absolute;
left: 65%;
border-radius: 5px;
border: 1px solid #ccc;
background: #F0F0F0;
outline: none;
cursor: pointer;
}
.uploadButton:hover{
background: #E0E0E0;
}
.processBar{
display: inline-block;
width: 0;
height: 7px;
position: absolute;
left: 600px;
top: 14px;
background: #009393;
}
.processNum{
position: absolute;
left: 650px;
color: #009393;
font-size: 12px;
line-height: 35px;
}
.delFile{
width:40px;
position: absolute;
left: 715px;
color: red;
font-size: 12px;
height:30px;
line-height: 30px;
border-radius: 5px;
text-align: center;
border: 1px solid red;
cursor:pointer;
}
.show{
text-align: center;
font-size: 14px;
color: #4A4A4A;
}
.fileInfo{
min-width: 200px;
height: 30px;
position: absolute;
top: 2px;
margin-left:150px;
text-align: center;
line-height: 30px;
font-size: 14px;
border-radius: 5px;
}
.cancelFile{
width: 50px;
height: 30px;
position: absolute;
top: 2px;
margin-left:500px;
text-align: center;
line-height: 30px;
font-size: 14px;
border: 1px solid red;
color:red;
border-radius: 5px;
text-decoration:none;
display:none;
}
.addFile{
width: 80px;
height: 30px;
position: relative;
margin-bottom:15px;
left: 66%;
border-radius: 5px;
border: 1px solid #afdfd0;
text-align: center;
line-height:30px;
color:#00bb80;
background: #e8f8f3;
font-size:14px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="addFile">添加文件</div>
<div class="upload">
<div class="uploadBox">
<span class="inputCover">选择文件</span>
<span class="fileInfo"></span>
<a href="javascript:void(0);" class="cancelFile">取消</a>
<form enctype="">
<input type="file" name="file" class="file"/>
</form>
<span class="processBar"></span>
<span class="processNum">未选择文件</span>
</div>
</div>
<button type="button" class="uploadButton">上传</button>
<div class="show"></div>
</body>
<script>
$(document).ready(function(){
var num = 0;
var uploadNum = 0;
var errorInfo = '';
var filetypes =["jpg", "png", "gif", "jpeg", "mp3", "flv", "avi", "mp4", "doc", "docx", "txt", "xlsx", "xls", "ppt", "pptx", "pdf", "wgt"];
//选择文件时，相关事件
$(document).on('change','input[type=file]',function(){
var filemaxsize = 1024*1024*1024;//1G，最大上传限制
var isIE = /msie/i.test(navigator.userAgent);//判断是否是ie浏览器
var fileSize = 0;
var filePath=$(this).val();
if (isIE && !this.files) {
var filePath = this.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if(!fileSystem.FileExists(filePath)){
alert("附件不存在，请重新选择！");
return false;
}
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
if(this.files.length > 0){
fileSize = this.files[0].size;
}else{
return false;
}
}
//判断文件类型
var isnext = false;
var fileEnd = filePath.substring(filePath.indexOf(".")+1).toLowerCase();
for(var i =0; i<filetypes.length;i++){
if(filetypes[i]==fileEnd){
isnext = true;
break;
}
}
if(!isnext){
alert("您未上传文件，或者您上传文件类型有误！");
return false;
}
if(fileSize > filemaxsize){
inputCover.html("<font>文件大于1G，请重新选择</font>");
processNum.html('未选择文件');
filePath = '';
return false;
}else{
$(this).parent().parent().find('.inputCover').html('重新选择');
$(this).parent().parent().find('.fileInfo').html(this.files[0].name+' / '+parseInt(fileSize/1024)+'KB');
$(this).parent().parent().find('.cancelFile').show();
$(this).parent().parent().find('.processNum').html('等待上传');
}
});
//取消文件事件
$(document).on('click','.cancelFile',function(){
$(this).parent().find('.file').val(null);
$(this).parent().find('.inputCover').html('选择文件');
$(this).parent().find('.fileInfo').html('');
$(this).parent().find('.cancelFile').hide();
$(this).parent().find('.processNum').html('未选择文件');
});
//新增文件事件
$(document).on('click','.addFile',function(){
if(num > 3){
alert('最多上传5个文件');
return false;
}
var html = '';
html += '<div class="uploadBox">';
html += '<span class="inputCover">选择文件</span>';
html += '<span class="fileInfo"></span>';
html += '<a href="javascript:void(0);" class="cancelFile">取消</a>';
html += '<form enctype="">';
html += '<input type="file" name="file" class="file"/>';
html += '</form>';
html += '<span class="processBar"></span>';
html += '<span class="processNum">未选择文件</span>';
html += '<span class="delFile">删除</span>';
html += '</div>';
$('.upload').append(html);
num++;
});
//删除文件事件
$(document).on('click','.delFile',function(){
$(this).parent().remove();
num--;
});
$(document).on('click','.uploadButton',function(){
upload();
})
//创建ajax对象，发送上传请求
function upload(){
//由于在success中用了延迟，导致当num<0时会再次执行upload函数
if(num < 0){
return false;
}
var paramData = new FormData();
var filesInfo = $(".upload").children('.uploadBox').eq(uploadNum).find('.file')[0].files;
if(filesInfo.length == 0){
paramData.append('Filedata','');
}else{
paramData.append('Filedata',filesInfo[0]);
}
$.ajax({
type: "post",
url:'upload.php',
data:paramData,
cache:false,
async:true,
processData: false,
contentType: false,
xhr:function(){
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',function(e){
var loaded = e.loaded;
var total = e.total;
var percent = Math.floor(100*loaded/total);
if(percent == 100){
percent = 99;
}
if(filesInfo.length != 0){
$(".upload").children('.uploadBox').eq(uploadNum).find('.processNum').html(percent+"%");
$(".upload").children('.uploadBox').eq(uploadNum).find('.processBar').css("width",(percent/2)+"px");
}
}, false);
}
return myXhr;
},
success: function(data){
if(data.code == 1){
$(".upload").children('.uploadBox').eq(uploadNum).find('.processNum').html("100%");
$(".upload").children('.uploadBox').eq(uploadNum).find('.processBar').css("width","50px");
}else{
errorInfo += '第'+(uploadNum+1)+'个'+data.msg+"\n";
}
uploadNum++;
num--;
if(num < 0){
if(errorInfo != ''){
//延迟200ms执行，等渲染完成
window.setTimeout(function () {
alert(errorInfo);
location.reload();
return false;
}, 200);
}else{
//延迟200ms执行，等渲染完成
window.setTimeout(function () {
alert('全部上传成功！');
location.reload();
return false;
}, 200);
}
}
upload();
}
})
}
})
</script>
</html>
优化文件上传
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
