首页html图片上传完整代码

html图片上传完整代码

时间: 2024-03-12 11:41:34 浏览: 22

当涉及到HTML图片上传的完整代码时，需要结合HTML、CSS和JavaScript来实现。以下是一个简单的示例代码： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>图片上传</title> <style> #preview { width: 200px; height: 200px; border: 1px solid #ccc; } </style> </head> <body> <h1>图片上传</h1> <input type="file" id="upload" accept="image/*"> <div id="preview"></div> <script src="script.js"></script> </body> </html> ``` CSS部分： ```css #preview { width: 200px; height: 200px; border: 1px solid #ccc; } ``` JavaScript部分（script.js）： ```javascript window.onload = function() { var upload = document.getElementById('upload'); var preview = document.getElementById('preview'); upload.addEventListener('change', function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { preview.style.backgroundImage = 'url(' + e.target.result + ')'; } reader.readAsDataURL(file); }); }; ``` 以上代码实现了一个简单的图片上传功能。用户可以点击选择文件按钮，选择一张图片后，图片会显示在预览区域中。