javaScript图片及时预览效果

<form action="">

文件：<input type="file" name="myFile" id="myFile" onchange="getFileContent()"> <br>

<img src="" alt="" id="img">

    </form>

    <script type="text/javascript">

        function getFileContent(){

            // 1.创建文件读取对象

            var reader = new FileReader();

            /*2.读取文件，获取DataURL

            2.1readAsDataURL没有返回值，但是读取完了之后会将结果存储到文件读取对象的result中

            2.2传递的参数为一个二进制文件（图片或者其他可以嵌入到文档的类型）

            2.3input读取的文件存储在file表单元素的files属性中，是一个数组*/

            var file = document.getElementById("myFile").files;

            reader.readAsDataURL(file[0]);

            // 获取数据

            // FileReader提供了一个完整的事件模型，用来捕获读取文件时的状态

            // onabort:读取文件中断时触发

            // onerror:读取错误触发

            // onload:读取成功触发

            // onloadend:读取完成触发，不管成功或者失败

            // onloadstart:开始读取时触发

            // onprogress:读取过程中持续触发

            reader.onload = function(){

                document.getElementById("img").src = reader.result;


            }

        }

    </script>