在HTML中，可以使用input标签的type为file的属性来上传文件，但是无法预览文件。为了实现图片预览，我们可以使用FileReader对象。首先，需要创建一个input标签用于选择图片文件：
<input type="file" id="fileInput">然后，我们可以在JavaScript中监听input的change事件，在事件处理函数中获取选中的文件，并使用FileReader对象将其转换为DataURL，再将DataURL赋值给一个img标签的src属性即可：
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = document.createElement('img');
img.src = event.target.result;
document.body.appendChild(img);
}
});其中，event.target.files[0]表示选中的文件，reader.readAsDataURL(file)将文件转换为DataURL，reader.onload在文件加载完成后执行，event.target.result即为转换后的DataURL，最后创建一个img标签并将DataURL赋值给其src属性即可。
在HTML中，同样是使用input标签的type为file的属性来上传文件。在JavaScript中，可以使用XMLHttpRequest对象或者fetch函数来发送HTTP请求，将文件上传到服务器。
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => {
console.log('Upload success:', response);
}).catch(error => {
console.error('Upload error:', error);
});
});其中，FormData对象用于创建表单数据，append方法用于添加文件。fetch函数用于发送HTTP请求，第一个参数为请求的URL，第二个参数为配置对象，包括请求方法、请求头、请求体等。在请求成功后，会返回一个响应对象，可以通过response.json()、response.text()等方法获取响应体的内容。