JavaScript上传文件时不用刷新页面方法总结（推荐

无需刷新页面的文件上传体验——利用JavaScript与CSS实现的无缝操作指南

在这个数字化的时代，文件上传已成为我们日常生活和工作中不可或缺的一部分。你是否想过在不刷新页面的情况下完成文件上传操作？答案是肯定的，而且非常简单。接下来，让我带你领略利用JavaScript和CSS实现的无刷新文件上传的魅力。

我们需要在HTML中设置一个文件输入框和一个上传按钮。代码示例如下：

```html

上传

```

接下来，我们利用JavaScript来处理文件上传的逻辑。当用户点击上传按钮时，我们会获取到文件输入框中的文件，并通过Fetch API将其发送到服务器。以下是具体的代码实现：

```javascript

document.getElementById('upload-btn').onclick = function(){

var oInput = document.getElementById('upload');

var file = oInput.files[0]; // 选取文件

var formData = new FormData(); // 创建表单数据对象

formData.append('file', file); // 将文件添加到表单对象中

fetch({

url: './', // 设置上传文件的URL地址

method: 'POST', // 设置请求方法为POST

body: formData

})

.then((response) => { // 处理上传后的响应结果

console.log('result is', response); // 在控制台打印响应信息

alert("上传完毕！"); // 提示用户上传完成

});

}

```html

```

```css

/ CSS部分 /

table {

border-collapse: collapse; / 合并边框模型 /

margin: 50px; / 设置外边距 /

text-align: center; / 文字居中显示 /

}

width: 50px; / 单元格宽度 /

height: 50px; / 单元格高度 /

border: 5px inset blue; / 默认边框样式 /

}

table td:hover { / 鼠标悬停时的样式 /

border: 5px solid red; / 改变边框颜色为红色 /

cursor: pointer; / 鼠标悬停时的光标样式 /

}