h5页面使用FileReader读取本地图片文件并显示

最新推荐文章于 2023-06-06 22:07:03 发布

转载最新推荐文章于 2023-06-06 22:07:03 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/litterjoan/articles/5691651.html

文章标签：

#javascript #ViewUI

本文介绍了一种利用HTML5特性实现图片上传预览的方法。通过FileReader API读取用户选择的图片文件，并验证其类型，最终将图片显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：使用input的 type="file" 属性 input的 this.files[0] 值，首先判断是否为img类型，并且获取到img的路径， innerHtml 到所要展示图片的 divbox中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>html5camera</title>
</head>
<body>
<div id="main">
  <div class="demo">
    <p>
      <label>请选择一个图像文件(请使用高级浏览器浏览：如Chrome，Firefox)：</label><br>
      <input type="file" id="file_input" />
    </p>
    <div id="result"> 
      <!-- 这里用来显示读取结果 --> 
    </div>
  </div>
  <br/>
  
  <br/>
</div>
<script type="text/javascript">
    var result = document.getElementById("result");
    var input = document.getElementById("file_input");
    
    if(typeof FileReader === 'undefined'){
        result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input.setAttribute('disabled','disabled');
    }else{
        input.addEventListener('change',readFile,false);
    }
                
                
    function readFile(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        
        reader.onload = function(e){
            //alert(3333)
            //alert(this.result);
            result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        }
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/litterjoan/articles/5691651.html