es5预览本地文件、es6练习代码演示案例

es6简单基础：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>1</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    </style>
    <script type="text/javascript">
    /*
    let const 只在申明的块中有效
    const申明的变量，类型不能变 var可以变类型
    const申明常量用大写
    */
    var a=1;
    {
        let a=3;
        console.log(a);
        const ARR=[1,2];
        ARR.push(3);
        console.log(ARR);
        // ARR=10;//此处会报错 
    }
    console.log(a);
    {
        let a=(x)=>(x*2);
        console.log(a(10));
    }
    {
        let a=(x,y=10)=>(x+y);
        console.log(a(2),a(2,3));
    }
    {
        let a=(x)=>function(){
            return 2;
        }();
        console.log(a(1));
    }
    {
        let a=[1,2,3];
        let b=a.map(f=>{
            return f+'s';
        });
        console.log(b);
    }
    {
        function Person(){
            this.age=0;
            this.addAge=()=>(this.age++);
        }
        let p=new Person();
        p.addAge();
        console.log(p.age);
    }

    //创建canvas及画图
    let newCanvas=()=>{
        let c=document.createElement("canvas");
        c.width=window.screen.width;
        c.height=window.screen.height;
        let d=c.getContext("2d");
        d.fillStyle="red";
        d.fillRect(10,10,100,100);
        return c;
    };
    //canvas保存为图片
    let canvasToImg=(canvas)=>{
        let image=new Image();
        image.src=canvas.toDataURL('image/png');
        return image;
    };
    
    window.onload=()=>{
        //写出canvas图片
        document.body.appendChild(canvasToImg(newCanvas()));
    }
    </script>
</head>
<body>
    
</body>
</html>

1.html

预览本地文件：

<!DOCTYPE html> 
<html> 
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>预览本地文件</title>
        <style type="text/css">
        video{
            background-color: #000;
        }
        </style>
        <script type="text/javascript"> 
        /** 
        * 从 file 域获取 本地图片 url 
        */ 
        function getFileUrl(sourceId) { 
            var url; 
            if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
                url = document.getElementById(sourceId).value; 
            } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } 
            return url; 
        } 

        /** 
        * 将本地图片 显示到浏览器上 
        */ 
        function preImg(sourceId, targetId){ 
            var url = getFileUrl(sourceId);
            console.log(sourceId,targetId);
            var imgPre = document.getElementById(targetId); 
            imgPre.src = url; 
        } 
        </script>
    </head> 
    <body> 
        <form action=""> 
            <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
            <!-- <img id="imgPre" src="" width="300px" height="300px" style="display: block;" />  -->
            <video id="imgPre" width="300px" height="300px" controls="controls" style="display: block;"></video>
        </form>
    </body> 
</html>

2.html

原文地址：https://www.cnblogs.com/wuhairui/p/8067070.html