溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

PHP實(shí)現(xiàn)文件上傳進(jìn)度提示

發(fā)布時(shí)間：2024-10-19 18:52:27 來源：億速云 閱讀：83 作者：小樊 欄目：編程語言

要實(shí)現(xiàn)文件上傳進(jìn)度提示，我們可以使用PHP、HTML、JavaScript和后端腳本（如Apache或Nginx服務(wù)器）來完成。以下是實(shí)現(xiàn)文件上傳進(jìn)度提示的步驟：

  1. 創(chuàng)建HTML表單

在HTML文件中創(chuàng)建一個(gè)表單，用于上傳文件。同時(shí)，添加一個(gè)用于顯示上傳進(jìn)度的<progress>元素和一個(gè)用于觸發(fā)文件上傳的<input type="file">元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload with Progress</title>
</head>
<body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="fileToUpload" id="fileToUpload">
        <br><br>
        <progress id="uploadProgress" value="0" max="100"></progress>
        <br><br>
        <input type="submit" value="Upload File" name="submit">
    </form>
    <script src="upload.js"></script>
</body>
</html>
  1. 編寫PHP后端腳本

創(chuàng)建一個(gè)名為upload.php的PHP文件，用于處理文件上傳。在這個(gè)文件中，我們將使用$_FILES全局變量來獲取上傳的文件信息，并使用move_uploaded_file()函數(shù)將文件移動到指定的目錄。

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));

// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file " . htmlspecialchars(basename($_FILES["fileToUpload"]["name"])) . " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>
  1. 編寫JavaScript代碼

創(chuàng)建一個(gè)名為upload.js的JavaScript文件，用于處理文件上傳和進(jìn)度提示。在這個(gè)文件中，我們將使用XMLHttpRequest對象來發(fā)送文件到服務(wù)器，并監(jiān)聽上傳進(jìn)度事件。

document.getElementById("uploadForm").addEventListener("submit", function(event) {
    event.preventDefault();
    var formData = new FormData(this);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);

    // Monitor upload progress
    xhr.upload.addEventListener("progress", function(event) {
        if (event.lengthComputable) {
            var progress = Math.round((event.loaded / event.total) * 100);
            document.getElementById("uploadProgress").setAttribute("value", progress);
        }
    });

    // Handle upload completion
    xhr.addEventListener("load", function() {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error("Upload failed with status " + xhr.status);
        }
    });

    // Send the request
    xhr.send(formData);
});

現(xiàn)在，當(dāng)用戶選擇一個(gè)文件并點(diǎn)擊上傳按鈕時(shí)，文件上傳進(jìn)度提示將顯示在<progress>元素中。請注意，這個(gè)示例僅用于演示目的，實(shí)際應(yīng)用中可能需要根據(jù)需求進(jìn)行調(diào)整。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

php
AI
助
手