html
<div id="file">
<input type="file" name="ver" id="ver"/>
<font color="red">*(apk,ipa目前为自动重命名)</font><br />
<div class="progress"><span class="bgpro"></span></div>
</div>
css
<style type="text/css">
div.progress{400px;height:20px;border:1px solid blue;background:#fff;display:none;}
span.bgpro{display:block;height:20px;background:blue;0px;text-align:right;color:#fff;font-size:12px;}
</style>
JS
//触发事件
$('#ver').change(function() {
//if 也可以使用try
if(typeof this.files == 'undefined') {
alert('建议您使用ie9以上非兼容模式或者火狐,谷歌浏览器进行上传可以实时查看上传进度!');
}
var ver = this.files[0];
//获取文件后缀名
var fixed = /.[^.]+$/.exec(ver.name);
if(fixed != '.apk' && fixed != '.ipa') {
alert('请上传正确类型的文件!');
return false;
}
//将进度条显示出来
$('div.progress').show();
try {
var fd = new FormData();
}catch(error) {
alert('建议您使用ie9以上非兼容模式或者火狐,谷歌浏览器进行上传可以实时查看上传进度!');
}
fd.append('ver',ver);
try{
//获取xml对象
var xhr = new XMLHttpRequest();
}catch(error) {
alert('建议您使用ie9以上非兼容模式或者火狐,谷歌浏览器进行上传可以实时查看上传进度!');
}
//发送ajax
xhr.open('post',"__URL__/uploadFile",true);
xhr.upload.onprogress = function(ev) {
//进行进度条展示
var percent = 0;
if(ev.lengthComputable) {
percent = 100 * ev.loaded / ev.total;
percent = parseFloat(percent).toFixed(2);
$('span.bgpro').css('width',percent + '%').html(percent + '%');
}
};
xhr.send(fd);
});