html5 filereader读取图像和文本
html5 filereader读取图像和文本
秋日童话 发表于8个月前
html5 filereader读取图像和文本
  • 发表于 8个月前
  • 阅读 13
  • 收藏 0
  • 点赞 0
  • 评论 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery/jquery.js"></script>
</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.onload=function(e){
            var result=document.getElementById("result");
            //显示文件
            result.innerHTML='<img src="' + e.target.result +'" alt="" />';
        }
    }

    function readAsBinaryString(){
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        //将文件以二进制形式读入页面
        reader.readAsBinaryString(file);
        reader.onload=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.onload=function(f){
            var result=document.getElementById("result");
            //显示文件
            result.innerHTML=this.result;
        }
    }
</script>
<p>
    <label>请选择一个文件:</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onclick="readAsDataURL()" />
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
    <input type="button" value="读取文本文件" onclick="readAsText()" />
</p>
<div id="result" name="result"></div>
</body>
</html>
共有 人打赏支持
粉丝 3
博文 7
码字总数 2757
×
秋日童话
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: