Javascript 删除上传文件

在实际项目中，经常会遇到文件上传的需求。上传文件成功后，有时候需要对文件进行删除操作。这时候我们就需要使用JavaScript来实现删除上传文件的功能。

下面就来介绍具体实现方式。

1. 使用input标签来实现文件上传并记录上传文件名。

<input type="file" name="file" id="file" onchange="uploadFile()">
<span id="filename"></span>
function uploadFile() {
var fileName = document.getElementById("file").files[0].name;
document.getElementById("filename").innerHTML = fileName;
}

在上传文件成功后，调用uploadFile()方法获取文件名，并将文件名显示在页面中。

2. 使用ajax方式实现文件上传并返回上传结果。

function uploadFile() {
var file = document.getElementById("file").files[0];
var formdata = new FormData();
formdata.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.send(formdata);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
if (result == "success") {
document.getElementById("filename").innerHTML = file.name;
//文件上传成功
} else {
//文件上传失败
}
}
}
}

上述代码中，我们使用ajax方式将文件上传到服务器，服务器返回上传结果。如果上传成功，则将文件名显示在页面中，否则通过提示框提示上传失败。

3. 使用ajax方式实现文件删除并返回删除结果。

function deleteFile() {
var fileName = document.getElementById("filename").innerHTML;
var xhr = new XMLHttpRequest();
xhr.open("GET", "delete.php?file=" + fileName, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
if (result == "success") {
document.getElementById("filename").innerHTML = "";
//文件删除成功
} else {
//文件删除失败
}
}
}
}

上述代码中，我们使用ajax方式向服务器发送删除请求，并返回删除结果。如果删除成功，则将文件名从页面中删除，否则通过提示框提示删除失败。

结语

Javascript可以用来完成多种操作，包括文件上传和删除。本文通过循序渐进的方式，逐步实现了删除上传文件的功能。