HTML5笔记四：文件及图像上传

来源：互联网发布：高校教师招聘考试知乎编辑：程序博客网时间：2024/06/06 09:10

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>    <script>        //将文件以Data URL形式进行读入页面        function dataURL(){            var file = document.getElementById('file').files[0];            //alert(file);            if(!/image\/\w+/.test(file.type)){                alert('不是图片');                return false;            }else{                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 sText(){            var file = document.getElementById('file').files[0];            var reader = new FileReader();            reader.readAsText(file);            reader.onload = function(){                var result = document.getElementById('result');                result.innerHTML = this.result;             }        }        //将文件以二进制形式进行读入页面        function binaryString(){            var file = document.getElementById('file').files[0];            var reader = new FileReader();            reader.readAsBinaryString(file);            reader.onload = function(){                var result = document.getElementById('result');                 result.innerHTML = this.result;            }        }    </script> </head> <body>    <form id="textform">            <input type="file" id="file"  />            <input type="button" value="读取图像"  onclick="dataURL()"/>            <input type="button" value="读取二进制数据"  onclick="binaryString()"/>            <input type="button" value="读取文本文件"  onclick="sText()"/>    </form>    <!--结果 -->    <div id="result">    </div> </body></html>

<!doctype html><html><head><meta charset="utf-8"><title>H5上传文件图片</title>    <script>        function showF(){            var file;            for(var i = 0;i<document.getElementById('file').files.length;i++){                file = document.getElementById('file').files[i];                alert(file.name);            }           }        function showT(){            var file;            file = document.getElementById('file2').files[0];            var size = document.getElementById('size');            var type = document.getElementById('type');            size.innerHTML = file.size;            type.innerHTML = file.type;        }        function showU(){            var file;            for(var i = 0;i<document.getElementById('file3').files.length;i++){                file = document.getElementById('file3').files[i];                if(!/image\/\w+/.test(file.type)){                    alert('不是图片');                }else{                    alert('图片');                    }            }           }    </script></head><body>    <!--多文件上传 multiple-->    <form id="textform">        <input id="file" type="file" multiple>        <input type="button" value="文件上传" onclick = "showF()">    </form>    <br/> <!--上传文件的字节和类型 -->    <form id="text2form">        <input type="file" id="file2">        <input type="button" value="显示文件信息" onClick="showT()">        文件字节长度 <span id="size"></span> <br/>            文件类型 <span id="type"></span>    </form>    <br/> <!--是否是图片是图片就上传 -->             <!--默认显示图片类型 -->     <form id="text4form">        <input type="file" id="file3" multiple accept="iamge/*">        <input type="button" value="显示文件信息" onClick="showU()">      </form></body></html>

0 0