简单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);

});

}