zoukankan      html  css  js  c++  java
  • h5上传图片

    1.如何在H5上传图片

    使用FileReader

    2.FileReader接口

    传图片我们只用到readAsDataURL

    3.FileReader接口事件

    传图片我们只用到onload

    4.如何使用FileReader

    <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="' + this.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>

    参考资料:http://blog.csdn.net/zk437092645/article/details/8745647

  • 相关阅读:
    centos安装时各个版本的含义
    centos或者ubuntu设置ssh免密码登陆
    centos配置网卡
    如何卸载centos中自带的Java
    基于VHDL的8255可编程并行接口电路设计
    Norns.Urd 中的一些设计
    手把手教你写DI_3_小白徒手支持 `Singleton` 和 `Scoped` 生命周期
    手把手教你写DI_2_小白徒手撸构造函数注入
    手把手教你写DI_1_DI框架有什么?
    手把手教你写DI_0_DI是什么?
  • 原文地址:https://www.cnblogs.com/norm/p/6179171.html
Copyright © 2011-2022 走看看