詳解input文件上傳

在Web應用程序中，文件上傳是一項非常重要的功能，允許用戶上傳數據以進行後續處理。HTML文件輸入元素（<input type=”file”>）允許用戶瀏覽並選擇要上傳的文件。本文將從多個方面對input文件上傳進行詳細的闡述。

一、multiple屬性

在默認情況下，<input type=”file”>只能選擇並上傳一個文件。但是，使用multiple屬性可以允許用戶選擇多個文件進行上傳。下面是一個示例：

<form action="file-upload.php" method="post" enctype="multipart/form-data">
  <label for="files">選擇文件:</label>
  <input id="files" name="files[]" type="file" multiple />
  <input type="submit" value="上傳文件" />
</form>

在上面的示例中，使用了multiple屬性，將name屬性設置為「files[]」，可以在PHP中輕鬆地訪問上傳的文件數組。

二、input文件html

<input type=”file”>通常與表單一起使用，以便將文件提交到服務器。通常，用戶應該知道他或她選擇了哪個文件。因此，可以使用HTML和CSS根據需要自定義文件輸入的樣式。

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> 選擇文件
</label>
<input id="file-upload" type="file"/>

上面的示例中創建了一個自定義的上傳按鈕，當用戶單擊「選擇文件」按鈕時，實際上是在單擊「input」元素。

三、input文件上傳獲取

獲取用戶選定的文件非常簡單。可以使用JavaScript監聽「input」元素的change事件，以獲取選定文件的引用。然後，您可以使用XMLHttpRequest對象將文件上傳到服務器。可以使用原生JavaScript或庫（如jQuery）來實現此功能。

let inputElement = document.getElementById("input");
 
inputElement.addEventListener("change", handleFiles, false);
 
function handleFiles() {
    let fileList = this.files; /* 獲取選定文件的列表 */
    /* 處理文件 */
}

四、input文件上傳獲取路徑

有時需要獲取選定文件的路徑。但由於安全性質，不支持訪問用戶系統的文件系統路徑。但可以嘗試使用文件拖放API來獲取文件路徑。可以使用文件拖放API來處理拖放事件，從中獲取該文件的路徑。

let dropArea = document.getElementById("drop-area");
 
dropArea.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);
 
dropArea.addEventListener("drop", function(event) {
    event.preventDefault();
    let files = event.dataTransfer.files;
    /* 處理文件 */
}, false);

五、input上傳文件保存

在將文件上傳到服務器之前，可能需要在本地對其進行保存或更改。在HTML5中，可以使用FileAPI來讀取文件內容、保存文件或按位元組讀取文件。以下是幾個示例：

1、讀取文本文件

let file = new File(["Hello, world!"], "hello-world.txt", {
    type: "text/plain",
});
 
let reader = new FileReader();
reader.onload = function() {
    console.log(reader.result);
};
reader.readAsText(file);

2、保存圖片文件

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
 
let img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    canvas.toBlob(function(blob) {
        saveAs(blob, "canvas.png");
    });
};
img.src = "image.png";

3、按位元組讀取文件

let file = new File(["Hello, world!"], "hello-world.txt", {
    type: "text/plain",
});
 
let reader = new FileReader();
reader.onload = function() {
    let bytes = new Uint8Array(reader.result);
    console.log(bytes);
};
reader.readAsArrayBuffer(file);

六、inputfile上傳文件

處理文件上傳的一種簡單方法是將其保存到服務器上的文件系統中。在PHP中，使用「move_uploaded_file」函數將上傳的文件移動到指定的服務器文件夾中。

<form action="file-upload.php" method="post" enctype="multipart/form-data">
  <label for="file">選擇文件:</label>
  <input id="file" name="file" type="file" />
  <input type="submit" value="上傳文件" />
</form>

在上面的示例中，選擇文件後可以使用以下PHP代碼保存上傳的文件：

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
 
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
    echo "文件已上傳。";
} else {
    echo "抱歉，上傳時出了一些問題。";
}

七、inputstream下載文件

如果您希望用戶能夠下載文件而不是上傳，可以提供一個鏈接，該鏈接將文件提供給用戶進行下載。下面是一個使用PHP的簡單示例：

<a href="path/to/file.pdf">Download PDF</a>

您還可以使用JavaScript來創建鏈接，以便在用戶單擊某個按鈕或其他元素時自動下載文件。

let btnDownload = document.getElementById("btn-download");
 
btnDownload.addEventListener("click", function() {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "path/to/file.zip");
    xhr.responseType = "blob";
    xhr.onload = function() {
        saveAs(xhr.response, "file.zip");
    };
    xhr.send();
}, false);

八、input上傳文件頭文件

在處理大量上傳的文件時，需要識別文件的類型。可以通過檢查文件的頭文件來確定文件類型。由於不同文件類型的文件頭文件位元組不同，因此可以使用文件頭文件來檢測文件類型。

$file = $_FILES["file"]["tmp_name"];
 
$fp = fopen($file, "r");
$file_signature = fread($fp, 4);
fclose($fp);
 
if ($file_signature == "PDF") {
    echo "這是一個PDF文件。";
} else if ($file_signature == "ZIP") {
    echo "這是一個ZIP文件。";
} else {
    echo "未知的文件類型。";
}

九、input多文件上傳選取

在HTML5中，可以使用多個「文件」輸入元素來選擇多個文件進行上傳。使用多個元素比使用「multiple」屬性更有選擇性。以下是實現所需UI和JavaScript的示例代碼：

<form action="file-upload.php" method="post" enctype="multipart/form-data">
  <label for="file1">選擇文件1:</label>
  <input id="file1" name="file1" type="file" /><br />
 
  <label for="file2">選擇文件2:</label>
  <input id="file2" name="file2" type="file" />
 
  <input type="submit" value="上傳文件" />
</form>

let inputElements = document.getElementsByTagName("input");
 
for (let i = 0; i < inputElements.length; i++) {
    let inputElement = inputElements[i];
    if (inputElement.type === "file") {
        inputElement.addEventListener("change", handleFiles, false);
    }
}
 
function handleFiles() {
    let fileList = this.files;
    /* 處理文件 */
}

綜上所述，input文件上傳在Web應用程序中非常常見，功能也非常強大。通過使用以上提到的技術和代碼示例，可以很容易地實現各種文件上傳、保存、下載和檢測功能，為Web開發工作提供幫助。

原創文章，作者：TRMT，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/137191.html