前端input获取文件然后显示

最新推荐文章于 2024-03-01 20:13:50 发布

Revival_Liang

最新推荐文章于 2024-03-01 20:13:50 发布

阅读量2.7k

点赞数 2

分类专栏： web 文章标签： input typefile input 获取图片文件

本文链接：https://blog.csdn.net/Revival_Liang/article/details/79000297

版权

web 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	

    <script type="text/javascript">  
    var result=document.getElementById("result");  
    var file=document.getElementById("file");  
      
    //判断浏览器是否支持FileReader接口  
    if(typeof FileReader == 'undefined'){  
        result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";  
        //使选择控件不可操作  
        file.setAttribute("disabled","disabled");  
    }  
      
    function readAsDataURL(){  
        //检验是否为图像文件  
        var file = document.getElementById("file").files[0];  
        if(!/image\/\w+/.test(file.type)){  
            alert("抱歉，只支持图片类型哦！");  
            return false;  
        }  
        var reader = new FileReader();  
        //将文件以Data URL形式读入页面  
        reader.readAsDataURL(file);  
        reader.οnlοad=function(e){  
            var result=document.getElementById("result");  
            //显示文件  
            result.innerHTML='<img src="' + this.result +'" alt="" />';  
        }  
    }  
      
    function readAsBinaryString(){  
        var file = document.getElementById("file").files[0];  
        var reader = new FileReader();  
        //将文件以二进制形式读入页面  
        reader.readAsBinaryString(file);  
        reader.οnlοad=function(f){  
            var result=document.getElementById("result");  
            //显示文件  
            result.innerHTML=this.result;  
        }  
    }  
      
    function readAsText(){  
        var file = document.getElementById("file").files[0];  
        var reader = new FileReader();  
        //将文件以文本形式读入页面  
        reader.readAsText(file);  
        reader.οnlοad=function(f){  
            var result=document.getElementById("result");  
            //显示文件  
            result.innerHTML=this.result;  
        }  
    }  
    </script>  
    <p>  
        <label>请选择一个文件：</label>  
        <!-- onchange在file选好图片之后会进行回调 -->
        <input type="file" id="file" οnchange='readAsDataURL()'/>  
        <input type="button" value="读取图像" οnclick="readAsDataURL()" />  
        <input type="button" value="读取二进制数据" οnclick="readAsBinaryString()" />  
        <input type="button" value="读取文本文件" οnclick="readAsText()" />  
    </p>  
    <div id="result" name="result"></div>  

</body>
</html>

Revival_Liang

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端input获取文件然后显示

Document var result=document.getElementById("result"); var file=document.getElementById("file"); //判断浏览器是否支持FileReader接口 if(typeof FileReader == 'undefined'){
复制链接

扫一扫