美文网首页
Day08(HTML5 demo 读取文件,存取数据)

Day08(HTML5 demo 读取文件,存取数据)

作者: AnnQi | 来源:发表于2017-11-07 14:37 被阅读0次

    读取文件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>      
            <div><input type="file" id="myfile" multiple="multiple"/></div>
            <div id="box"></div>
        </body>
        <script type="text/javascript">
            var myfile =document.getElementById("myfile");
            var box = document.getElementById("box")
            myfile.onchange = function(){
    //          console.log(myfile.files[0].name);
    
                if(myfile.files[0]){    // 如果选择文件           
                    for(var i=0;i<myfile.files.length;i++){
                        // continue 本次循环中continue语句不执行,直接执行 i++
                        if(myfile.files[i].type.indexOf("image")==-1) continue;
                        var fs = new FileReader();
                        fs.readAsDataURL(myfile.files[i]);  // 读取文件
                        fs.onload = function(){
                            var imgdata = this.result;  // base 64
                            var img = new Image();
                            img.src = imgdata;
                            box.appendChild(img);
                        }
                    }
                    
                }
            }
        </script>
    </html>
    

    存,取 数据

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <button id="save">存</button>
            <button id="fetch">取</button>
            
        </body>
        
        <script>
            var btnsave = document.getElementById("save");
            var btnfatch = document.getElementById("fetch");
            
            //session 会话
            btnsave.onclick = function(){
                //sessionStorage.setItem("mysave","canvas"); //用户打开浏览器到关闭期间的数据,适合用户登录期间的数据
                localStorage.setItem("mysave","canvas") // 长期存在用户的浏览器里,除非删除
                alert("save successfully!");
            }
            
            btnfatch.onclick = function(){
                //alert(sessionStorage.getItem("mysave"));
                alert(localStorage.getItem("mysave"));
            }
            
        </script>
    </html>
    
    

    表单存取

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <form action="">
                
                用户名:<input type="text"/>
                密码:<input type="text"/>
                确认密码:<input type="text"/>
                电话:<input type="text"/>
            </form>
        </body>
        <script type="text/javascript">
            var inputs = document.getElementsByTagName("input");
            window.onunload = function(){
                var arr = [];
                for(var i=0;i<inputs.length;i++){
                    arr.push(inputs[i].value);
                }
                localStorage.setItem("mysaveForm",arr);
            }
            
            window.onload = function(){
                var getArr = localStorage.getItem("mysaveForm").split(",");
                
                for(var i=0;i<getArr.length;i++){
                    inputs[i].value = getArr[i];
                }
            }
        </script>
    </html>
    
    

    相关文章

      网友评论

          本文标题:Day08(HTML5 demo 读取文件,存取数据)

          本文链接:https://www.haomeiwen.com/subject/frhjmxtx.html