- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <style>
- #fileImage{width: 300px;height: 300px; margin: 20px auto;background-repeat: no-repeat ;background-position: left top;background-size: contain; }
- #fileInfo{border: 1px solid #eee;}
- </style>
- <body>
- <div id="fileImage"></div>
- <input type="file" value="upload" id="fileInput">
- <p id="fileInfo"></p>
- </body>
- <script>
- var fileInput = document.getElementById("fileInput"),
- fileImage = document.getElementById("fileImage"),
- fileInfo = document.getElementById("fileInfo");
- // 监听 change 事件
- fileInput.addEventListener('change',function(){
- // 清空预览区背景图片
- fileImage.style.backgroundImage = '';
- // 检查文件是否选择
- if(!fileInput.value){
- fileInfo.innerHTML = "没有选择任何文件";
- return;
- }
- // 获取 file 的引用
- var file = fileInput.files[0];
- // 获取 file 信息
- fileInfo.innerHTML = '文件'+file.name+'<br>'+
- '大小'+file.size+'<br>'+
- '修改'+file.lastModifiedDate+'<br>';
- 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;
- fileImage.style.backgroundImage = 'url('+data+')';
- }
- // 以 DataURL 的形式读取文件:
- reader.readAsDataURL(file);
- });
- </script>
- </html>
来源: http://www.bubuko.com/infodetail-2626027.html