首页html上传图片并回显

html上传图片并回显

时间: 2023-07-25 11:28:52 浏览: 113

好的，以下是一个简单的 HTML 页面，可以上传图片并在页面上回显出来： ```html <!DOCTYPE html> <html> <head> <title>上传图片并回显</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*"> <input type="submit" value="上传"> </form> <br> <img id="preview" src="" style="max-width: 400px;"> <script> var input = document.querySelector('input[type=file]'); var preview = document.querySelector('#preview'); input.addEventListener('change', function () { var file = input.files[0]; var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); } else { preview.src = ""; } }); </script> </body> </html> ``` 这个页面有一个表单，允许用户选择一个图片文件并提交表单。提交表单后，页面不会刷新，而是使用 JavaScript 将选择的图片文件预览在页面上。这里使用 FileReader API 将图片文件转换为 Data URL，然后设置 `<img>` 标签的 `src` 属性为该 URL，从而实现了预览效果。

阅读全文