Skip to content

Instantly share code, notes, and snippets.

@qzm

qzm/upload.html

Created April 23, 2017 15:32
Show Gist options
  • Save qzm/68e9c2f7ea7f013c37e2c6c0f2ca0e58 to your computer and use it in GitHub Desktop.
Save qzm/68e9c2f7ea7f013c37e2c6c0f2ca0e58 to your computer and use it in GitHub Desktop.
Download ZIP
upload
Raw
upload.html
<html>
<body>
<div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;">
</div>
<br/>
<div id="test-file-info"></div>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">
var   fileInput = document.getElementById('test-image-file'),
  info = document.getElementById('test-file-info'),
  preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {   // 清除背景图片:
  
preview.style.backgroundImage = '';   // 检查文件是否选择:
  
if (!fileInput.value) {    
info.innerHTML = '没有选择文件';    
return;  
}   // 获取File引用:
  
var file = fileInput.files[0];   // 获取File信息:
  
info.innerHTML = '文件: ' + file.name + '<br>' +            '大小: ' + file.size + '<br>' +            
'修改: ' + file.lastModifiedDate;  
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {    
alert('不是有效的图片文件!');    
return;  
}   // 读取文件:
  
var reader = new FileReader();  
reader.onload = function (e) {    
var       data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'     
    
preview.style.backgroundImage = 'url(' + data + ')';  
};   // 以DataURL的形式读取文件:
  
reader.readAsDataURL(file);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment