JavaScript 文件上传是一个非常常见的操作，它可以让用户轻松地将文件上传到网站后台。在下面的文章中，我们将详细讲解如何使用 JavaScript 实现文件上传。

首先，我们需要创建一个 HTML 文件上传表单。代码如下：

<form enctype="multipart/form-data">
<input type="file" name="file" id="file">
<input type="button" value="上传" onclick="upload()">
</form>

上面的代码中，我们创建了一个 input 元素，它的 type 属性被设置为 file，这表示这是一个上传文件的表单。我们还创建了一个按钮，当用户点击它时，触发 upload() 函数。注意，我们将 enctype 属性设置为 multipart/form-data，这是因为文件上传时需要使用这种编码类型。

接下来，我们来实现 upload() 函数。代码如下：

function upload() {
var fileInput = document.getElementById("file");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.send(formData);
}

上面的代码中，我们首先获取了文件输入框的值，然后将其保存到 formData 对象中。接着创建了一个 XMLHttpRequest 对象，用于向服务器发送请求。我们将请求方法设置为 POST，这样服务器就知道这是一个上传文件的请求。最后，我们将 formData 对象发送到服务器。

在实际开发中，我们通常需要添加一些其他的逻辑，比如文件上传进度条、上传文件的格式限制等等。在下面的例子中，我们演示了如何使用 JavaScript 实现一个文件上传进度条。

function upload() {
var fileInput = document.getElementById("file");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
document.getElementById("progress").innerText = percent + "%";
}
}, false);
xhr.send(formData);
}

上面的代码中，我们给 xhr.upload 对象添加了一个 progress 事件监听器。当文件上传过程中，这个事件会被触发。在这个事件监听器中，我们计算出文件上传进度的百分比，然后将其显示在页面上。

总之，使用 JavaScript 实现文件上传是非常简单的。我们只需要创建一个 input 元素，绑定上传按钮的操作，然后使用 XMLHttpRequest 对象来实现上传。在实际的开发过程中，我们可以添加一些其他的逻辑，比如文件上传进度条、文件格式限制等等，以提高用户体验。