js 读取本地图片-作为上传图片的预览

<form action="">
        file: <input id="fileDemo" type="file" name="avatar" />
        <button>提交</button>
    </form>
    <div id="resImg">

        <script>
            // 监听点击事件
            document.querySelector('button').onclick = function(e) {
                //阻止默认提交行为
                e.preventDefault()
                // 新建读取对象
                var reader = new FileReader();
                // 获取选择的文件
                var resultFile = document.getElementById("fileDemo").files;
                //打印查看一下上传的文件
                console.log(resultFile);
                //以dataUrl的方式读取;这里还可以以其他方式读取,eg:文本读取...
                reader.readAsDataURL(resultFile[0]);
                // 当文件读取完毕时
                reader.onload = function(e) {
                    var urlData = this.result;
                    document.getElementById("resImg").innerHTML += "<img width='100px' height='100px' src='" + urlData + "' alt='" + resultFile.name + "' />";
                };