简单js上传文件,更改input样式

//单个简单的文件上传 
<a href="javascript:;" class="file">
<i class="iconfont icon-yunshangchuan" style="font-size:18px;color:#00acac;display:inline-block;margin-right:2px;"></i>
选择文件
<input type="file" name="file" class="fileUpload" data-buttonname="btn-success" />
</a>
 
<div class="tarDetail">
<span class="winrar"></span>
<div class="tarDescribe">
<p class="tarName"></p>
<p class="tarSize"><span class="tar-size"><span></p>KB
</div>
<i class="fa fa-trash-o delTar"></i>
</div>
 
 
js部分
$(els.panel).on('change', '.fileUpload', function (e) {
var files = e.currentTarget.files[0]
var fileExtension1 = e.currentTarget.files[0].name.split(".tar.gz")[1]
var GB = 1024 * 1024 * 1024;//定义GB的计算常量
var MB = 1024 * 1024;//定义MB的计算常量
var KB = 1024;//定义KB的计算常量
if (files.name) {
console.log(files)
if (fileExtension1 == '') {
if (files.size/GB > 1) {
$$.showAlertMsg('每次只能上传1G以内的安装包文件', {}, {
title: '错误提示',
icon: 2
});
} else {
if (files.name.split("backup-")[0] != "hotdb-") {
$$.showAlertMsg('文件名必须以hotdb-backup-开头', {}, {
title: '错误提示',
icon: 2
});
return;
}
if ($('.tarName').html() != '') {
$(".fileUpload").attr("disabled", true);
$$.showAlertMsg('不允许重复上传文件', {}, {
title: '错误提示',
icon: 2
});
} else {
$('.tarDetail').css('display', 'block')
$('.tarName').html('').html(files.name)
$('.tar-size').html('').html(
Math.ceil(files.size/KB)
)
$('.winrar').html('').html('TAR.GZ')
$(".code").removeClass("disabled");
$(".ok").removeClass("disabled");
}
}
} else {
$$.showAlertMsg('格式错误(必须以.tar.gz结尾),请重新上传', {}, {
title: '错误提示',
icon: 2
});
$(".code").addClass("disabled");
$(".ok").addClass("disabled");
$('.fileUpload').val('')
return;
}

}
 
// $('.fileUpload').val('')   
// input file onchange事件不触发(第二次上传同名文件)
// 将其清空第二次也可以上传同文件名字
})
//删除,删除之后才能上传
$(els.panel).on('click', '.delTar', function (e) {
$('.tarDetail').css('display', 'none')
var fileName = $('.fileUpload');
fileName.after(fileName.clone().val(""));
fileName.remove();
$('.tarName').html('');
$('.tar-size').html('');
$('.winrar').html('');
$(".fileUpload").attr("disabled", false);
$(".code").addClass("disabled");
$(".ok").addClass("disabled");
})
 
//点击确定按钮上传
$(els.btnOk).on('click', function () {
var fileName = $('.fileUpload').val();
if (!fileName) {
$$.showAlertMsg('请上传文件', $('.fileUpload'));
return;
}
var data, cb, reader;
reader = new FileReader();
reader.onload = function () {
var fileData, formData, apiConfig, cb, data = {};

data = {
file: file,
password:rds.util.handleRsaEncrypt( $(els.panel + ' [name="password"]').val()),//密码加密操作
code:$(els.panel + ' [name="code"]').val()
};
 
fileData = this.result;

formData = new FormData();

for (var k in data) {
formData.append(k, data[k]);
}


cb = function (resp) {

if (resp.code != 0) {
$('.tarDetail').css('display', 'none')
$('.tarName').html('');
$('.tar-size').html('');
$('.winrar').html('');
$(".fileUpload").attr("disabled", false);
$(".code").addClass("disabled");
$(".ok").addClass("disabled");
return;
}
$$.showMsg('任务已发起,可在任务中心查看进程')
$(els.panel + ' [name="password"]').val('');
$(els.panel + ' [name="code"]').val('');
me.Api.init();//初始化列表接口
};
me.Api.upgrade(formData, cb);//调更新版本接口
};
reader.readAsDataURL(file);
});
}
原文地址:https://www.cnblogs.com/hrr666/p/11113096.html