h5页面使用FileReader读取本地图片文件并显示-资讯-Savh.Cn

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

使用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/>
</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>

http://www.savh.cn/thread-153.htm
转载请注明:Savh.Cn 发表