这个实现方法挺简单，我这边用自己的宝塔服务器给大家做下演示吧，希望能帮助到大家哈。
具体实现的逻辑就是：HTML中创建一个文件选择输入（input）元素，用户可以通过它选择本地的图片文件。 使用JavaScript监听input元素的change事件，当用户选择文件后触发。 在change事件的回调函数中获取文件，并使用FormData对象来准备上传。 使用XMLHttpRequest或fetch API发送包含图片文件的FormData对象到服务器。
实现的步骤：
1、我们在服务器创建一个临时目录，然后创建两个文件，一个1.html，另一个upload.js
2、编辑1.html，粘贴如下代码保存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Auto Upload</title>
</head>
<body>
<!-- 文件选择输入元素 -->
<input type="file" id="imageInput" accept="image/*" hidden />
<button id="uploadTrigger">Choose an Image</button>
<script src="upload.js"></script>
</body>
</html>
3、编辑upload.js，编辑如下代码保存
document.getElementById('uploadTrigger').addEventListener('click', function() {
// 触发文件选择输入元素
document.getElementById('imageInput').click();
});
document.getElementById('imageInput').addEventListener('change', function(event) {
if (event.target.files.length > 0) {
// 获取选中的文件
var file = event.target.files[0];
// 准备上传
var formData = new FormData();
formData.append('image', file);
// 创建XMLHttpRequest对象进行上传
var xhr = new XMLHttpRequest();
xhr.open('POST', 'your-server-endpoint', true);
// 设置上传完成后的回调函数
xhr.onload = function() {
if (this.status == 200) {
console.log('Image uploaded successfully');
} else {
console.error('Upload failed with status: ' + this.status);
}
};
// 发送数据
xhr.send(formData);
}
});
4、然后浏览器访问1.html，点击按钮选择一个图片，它会自动上传到当前目录
| 
