利用FileReader实现图片预览上传

最新推荐文章于 2024-05-09 20:43:47 发布

weixin_34362875

最新推荐文章于 2024-05-09 20:43:47 发布

阅读量47

点赞数

文章标签： python

原文链接：https://my.oschina.net/longjianghu/blog/190771

版权

2019独角兽企业重金招聘Python工程师标准>>>

利用FileReader实现图片预览上传，原文引用自：http://www.jsmix.com/blog/html5/file-reader.html

<html>
<head>
<title>File Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	text-align: center;
}
#demo_result img {
	border: 2px solid #369;
	padding: 3px;
}
p {
	padding: 20px 0;
}
.warn {
	font-weight: bold;
	color: red;
}
</style>
</head>
<body>
<p>
  <label>请选择一个图像文件：</label>
  <input type="file" id="demo_input">
</p>
<div id="demo_result"></div>
<script type="text/javascript">
    var result = document.getElementById("demo_result");
            var input = document.getElementById("demo_input");

            if(typeof FileReader === 'undefined'){
                result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader<\/p>";
                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){
                    result.innerHTML = '<img src="'+this.result+'" alt=""/>'
                }
            }
        </script>
</body>
</html>

转载于:https://my.oschina.net/longjianghu/blog/190771