12345678910111213141516171819202122232425<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 + "' />"; };