function getId(id){
return document.getElementById(id)
}
var obj ={
fileInput : getId('test-image-file'),
info: getId('test-file-info'),
preview: getId('test-image-preview'),
file: '',
reader: new FileReader(),
data: ''
}
obj.fileInput.addEventListener('change',function(){
//清除背景图片
obj.preview.style.background = '';
//检查文件是否选择
if(!obj.fileInput.value){
obj.info.innerHTML = '没有选择文件';
return;
}
//获取file引用
obj.file = obj.fileInput.files[0];
//获取File信息
obj.info.innerHTML = '文件:' + obj.file.name + '<br>' +
'大小:' + obj.file.size + '<br>' +
'修改:' + obj.file.lastModifiedDate.toLocaleString();
if(obj.file.type !== 'image/jpeg' && obj.file.type !== 'image/png' && obj.file.type !== 'image/gif'){
alert('不是有效的图片文件!');
return;
}
//读取文件
obj.reader.onload = function(e){
obj.data = e.target.result;
obj.preview.style.backgroundImage = 'url('+ obj.data +')';
}
obj.reader.readAsDataURL(obj.file);
})