Javascript 刪除上傳文件

在實(shí)際項(xiàng)目中，經(jīng)常會(huì)遇到文件上傳的需求。上傳文件成功后，有時(shí)候需要對(duì)文件進(jìn)行刪除操作。這時(shí)候我們就需要使用JavaScript來(lái)實(shí)現(xiàn)刪除上傳文件的功能。

下面就來(lái)介紹具體實(shí)現(xiàn)方式。

1. 使用input標(biāo)簽來(lái)實(shí)現(xiàn)文件上傳并記錄上傳文件名。

<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;
}

在上傳文件成功后，調(diào)用uploadFile()方法獲取文件名，并將文件名顯示在頁(yè)面中。

2. 使用ajax方式實(shí)現(xiàn)文件上傳并返回上傳結(jié)果。

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方式將文件上傳到服務(wù)器，服務(wù)器返回上傳結(jié)果。如果上傳成功，則將文件名顯示在頁(yè)面中，否則通過(guò)提示框提示上傳失敗。

3. 使用ajax方式實(shí)現(xiàn)文件刪除并返回刪除結(jié)果。

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方式向服務(wù)器發(fā)送刪除請(qǐng)求，并返回刪除結(jié)果。如果刪除成功，則將文件名從頁(yè)面中刪除，否則通過(guò)提示框提示刪除失敗。

結(jié)語(yǔ)

Javascript可以用來(lái)完成多種操作，包括文件上傳和刪除。本文通過(guò)循序漸進(jìn)的方式，逐步實(shí)現(xiàn)了刪除上傳文件的功能。