用js实现选择手机相册图片
时间: 2023-06-14 14:05:26 浏览: 48
可以使用HTML5的FileAPI来实现选择手机相册图片。下面是一个简单的示例代码:
HTML部分:
```html
<input type="file" accept="image/*" id="image-file-input">
<img src="" id="preview-image">
```
JS部分:
```javascript
const imageFileInput = document.querySelector('#image-file-input');
const previewImage = document.querySelector('#preview-image');
imageFileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.addEventListener('load', function(event) {
previewImage.src = event.target.result;
});
reader.readAsDataURL(file);
});
```
上述代码中,input元素的type属性设置为file,accept属性设置为image/*,表示只允许选择图片文件。当用户选择了图片文件后,会触发change事件,我们可以获取到选择的文件,然后使用FileReader对象将文件读取为base64格式的数据URL,最后将数据URL赋值给img元素的src属性,就可以在页面上显示预览图了。