input type="file" 点击后按钮背景展示图片
时间: 2023-12-08 07:04:14 浏览: 32
你可以使用 JavaScript 来实现这个功能。首先,你需要在 HTML 中创建一个 input 元素,type 属性设置为 file,用于用户选择文件。然后,你需要创建一个用于展示图片的按钮,可以是一个 div 元素。最后,在 JavaScript 中,你需要监听 input 元素的 onchange 事件,获取用户选择的文件信息,并将所选文件的 URL 赋值给按钮的背景图片属性。
以下是一个简单的示例代码:
HTML:
```html
<input type="file" id="fileInput">
<div id="button"></div>
```
CSS:
```css
#button {
width: 100px;
height: 100px;
background-size: cover;
background-position: center;
}
```
JavaScript:
```javascript
const fileInput = document.getElementById('fileInput');
const button = document.getElementById('button');
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
const reader = new FileReader();
reader.addEventListener('load', () => {
button.style.backgroundImage = `url(${reader.result})`;
});
if (file) {
reader.readAsDataURL(file);
}
});
```
当用户选择文件后,JavaScript 代码会将所选文件的 URL 赋值给按钮的背景图片属性,从而展示出所选的图片。