input type="file" 文件上傳的詳細介紹

一、選取並上傳文件

input type=”file” 是用於選擇本地文件並上傳到伺服器的功能。在實現過程中，需要注意以下幾點：

1、input 標籤的 name、id、accept 屬性

  name 屬性用於伺服器接收傳來的文件的參數名，id 屬性用於 JS 操作 DOM，accept 屬性可限制文件類型和大小。例如：

    <input type="file" name="file" id="file" accept=".jpg,.png" />

2、JS 獲取上傳的文件及其文件名

  通過 JS 獲取 input 標籤的 value，即文件路徑，我們可以獲得文件的文件名：

    let selectedFile = document.getElementById('file').files[0];
    console.log(selectedFile.name);

3、發送 POST 請求上傳文件

  實現文件上傳最常見的方法是使用表單提交，即 POST 方法。我們需要將文件轉化為二進位數據進行傳輸，同時需要設置請求頭和表單數據，代碼如下：

    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    formData.append('file', selectedFile, selectedFile.name);
    xhr.open('POST', 'upload.php', true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.send(formData);

二、文件上傳進度條

為了提高用戶體驗，我們可以增加文件上傳進度條。

1、監聽事件 onprogress 和 onload

  通過監聽事件 onprogress 和 onload，我們可以獲得上傳進度和上傳完成的信息。其中，loaded 屬性表示上傳的位元組數，total 屬性表示文件的總位元組數。

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            let percentComplete = Math.round((event.loaded / event.total) * 100);
            console.log(percentComplete + '% uploaded');
        }
    };
    xhr.onload = function() {
        console.log(xhr.responseText);
    };

2、實現進度條樣式

  在 HTML 中，我們可以設置一個進度條樣式：

    <div class="progress-bar"></div>

  在 CSS 中，我們可以設置進度條樣式：

    .progress-bar {
        width: 0%;
        height: 20px;
        background-color: green;
    }

  在 JS 中，我們可以實現進度條的動畫效果，代碼如下：

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            let percentComplete = Math.round((event.loaded / event.total) * 100);
            console.log(percentComplete + '% uploaded');
            let progressBar = document.querySelector('.progress-bar');
            progressBar.style.width = percentComplete + '%';
        }
    };
    xhr.onload = function() {
        console.log(xhr.responseText);
        let progressBar = document.querySelector('.progress-bar');
        progressBar.style.width = '100%';
    };

三、後台接收文件並保存

1、伺服器可以使用 PHP 來接收文件，PHP 提供了一個 $_FILES 全局變數，用於存儲上傳文件的信息。代碼如下：

    $file = $_FILES['file'];
    move_uploaded_file($file['tmp_name'], 'uploads/'.$file['name']);
    echo 'success';

2、在 move_uploaded_file 函數中，第一個參數是源文件路徑，第二個參數是目標文件路徑。在目標文件路徑中，可以指定文件的存儲位置和文件名。

3、為了防止文件重名，可以在文件名中添加時間戳等隨機數，如：

    $file = $_FILES['file'];
    $timestamp = time();
    move_uploaded_file($file['tmp_name'], 'uploads/'.$timestamp.'_'.$file['name']);
    echo 'success';

四、安全性考慮

1、客戶端限制文件類型和大小

  通過設置 input 標籤的 accept 屬性，可以限制文件類型，通過設置 input 標籤的 size 屬性，可以限制文件大小。

2、解決文件上傳漏洞

  文件上傳漏洞是指攻擊者通過上傳惡意文件，在網站伺服器上執行惡意代碼。為了解決文件上傳漏洞，可以採用以下方法：

  ①在服務端對上傳的文件進行檢查和限制，如限制上傳文件類型和大小；

  ②在客戶端對文件進行驗證和過濾，如限制文件類型和大小；

  ③對上傳文件的後綴名進行檢查，如 js、php、html 等文件不能正常解析；

  ④對伺服器上的上傳文件進行隔離和限制許可權，即避免上傳文件可以訪問或修改其他文件。

五、總結

以上是 input type=”file” 文件上傳的詳細介紹。通過合理的限制和措施，我們可以使文件上傳的功能更加安全、可靠、用戶友好。