<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传</title> <style type="text/css"> /* css */ #fileimg{ width:200px; height:200px; border:1px solid #eee; } .Btn{ width:100px; background: #4BCD61; border: 0px; } </style> <script type="text/javascript"> //JS function fileClick() { document.getElementById('file').click() }//触发一个触发浏览事件，没有的话点击button就不会出现选择框了 function upCh(file){ let img = document.getElementById('fileimg') let formData = new FormData() let imgUrl = file.files[0]; if (imgUrl){ formData.append('file',imgUrl); imgUrl.src = window.URL.createObjectURL(imgUrl)//window.URL.createObjectURL预览图片 /* 这里可以写上传到后端代码 */ } } </script> </head> <body> <input type="file" id="file" name="" onchange="upCh(this)" /> <br /> <img id="fileimg" src="" /> <br /> <button class="Btn" onclick="fileClick()">上传图片</button> </body> </html>
此代码可以复制粘贴看看运行效果，十分简单
