h5-FileReader对象的使用

<!--FileReader对象的使用-->

<!--需要及时预览
及时：当用户选择完图片之后就立即进行预览处理--onchange事件
预览：通过文件读取对象的readAsDataURL()完成
-->
<form action="">
    文件：<input type="file" name="myFile" id="myFile"  onchange="getFileContent();"><br/>
    <input type="submit">
</form>
<img src="" alt="">

<script>
    function getFileContent() {
        //创建文件读取对象
        var reader = new FileReader();
        //读取文件，获取DataURL
        var file = document.querySelector("#myFile").files;
        reader.readAsDataURL(file[0]);
        /*获取数据*/
        reader.onload = function () {
            /*展示*/
            document.querySelector("img").src = reader.result;
        }
    }
</script>