图片上传前端
时间: 2023-07-02 16:18:38 浏览: 51
要实现图片上传的前端代码,可以使用HTML的input元素结合type="file"属性来创建一个文件选择器,然后在JavaScript中监听文件选择器的change事件,获取用户选择的文件,再使用XMLHttpRequest或Fetch API将文件上传到服务器。
以下是一个基本的HTML和JavaScript代码示例,可以实现图片上传的功能:
```html
<input type="file" id="file-input">
<button onclick="uploadFile()">上传</button>
<script>
function uploadFile() {
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
console.log('上传成功');
})
.catch(error => {
console.error('上传失败', error);
});
}
</script>
```
需要注意的是,这只是一个基本的示例代码,实际需要根据具体的需求进行修改和完善。同时,还需要在后端实现接收并处理上传的文件的功能。