详解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开发工作提供帮助。