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); })