极客教程如何在HTML中为网页添加文件上传功能
简介
在这篇文章中，我们将引导你完成在你的网页上添加文件上传功能的过程。我们将告诉你如何创建一个带有文件输入域的HTML表单，以及如何创建一个处理文件上传过程的脚本。
方法
我们可以用两种方法在HTML中为我们的网页添加文件上传功能，如下所示
- 使用一个带有文件输入字段的基本HTML表单
-
使用jQuery和ajax
现在让我们来详细讨论一下。
方法1：使用带有文件输入字段的基本HTML表单
这种方法涉及到创建一个简单的带有文件输入字段的HTML表单，允许用户选择一个文件进行上传。然后，该表单被发送到一个服务器端脚本，处理文件的实际保存。
第1步 – 创建一个名为index.html的文件。
第2步 – 创建一个带有文件输入域的HTML表单。
例子
让我们通过一个例子更好地理解这个问题。
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<h1>Welcome to Tutorials Point</h1>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedFile">
<input type="submit" value="Upload">
</form>
</body>
</html>
这将创建一个HTML表单，其中有一个文件输入字段，允许用户选择要上传的文件，还有一个提交按钮来发送该表单。action属性被设置为 “upload.php”，它是处理文件上传的服务器端脚本。enctype属性被设置为 “multipart/form-data”，这对于文件上传是必要的。
第3步 – 创建服务器端的PHP脚本（ action.php） 来处理文件的上传。
<?php
if(isset(_FILES['uploadedFile'])){errors= array();
file_name =_FILES['uploadedFile']['name'];
file_size =_FILES['uploadedFile']['size'];
file_tmp =_FILES['uploadedFile']['tmp_name'];
file_type =_FILES['uploadedFile']['type'];
file_ext=strtolower(end(explode('.',_FILES['uploadedFile']['name'])));
extensions= array("jpeg","jpg","png");
if(in_array(file_ext,extensions)=== false){errors[]="extension not allowed, please choose a JPEG or PNG file.";
}
if(file_size>2097152) {errors[]='File size must be excately 2 MB';
}
if(empty(errors)==true) {
move_uploaded_file(file_tmp,"upload/".file_name);
echo "Success";
}else{
print_r(errors);
}
}
?>
这个脚本首先使用isset函数和$ _FILES 超全局检查文件输入栏是否包含一个文件。然后，该脚本使用in_array函数和预先定义的允许的文件扩展名列表检查文件大小和文件扩展名。如果文件是有效的，就用move_uploaded_file函数将其移动到服务器上的 “upload “目录。如果文件无效，就会显示一个错误信息。
方法2：使用jQuery和ajax
这种方法是一种更高级的处理文件上传的方法，它允许你处理文件上传过程而不必刷新页面。
第1步 – 创建一个名为index.html的文件
第2步 – 在这个文件中包括jQuery和jQuery Form Plugin
例子
让我们通过一个例子更好地理解这个问题。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
这一步包括在你的HTML文档中加入jQuery和jQuery Form Plugin库。这些库将允许你使用ajaxForm方法，通过JavaScript来处理文件上传过程。
第3步 - 创建一个带有文件输入字段的HTML表单 —
<form id="fileUploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedFile">
<input type="submit" value="Upload">
</form>
这一步类似于方法1的第1步。你创建一个带有文件输入字段的HTML表单，和一个提交按钮，并将action属性设置为指向处理文件上传的服务器端脚本，将enctype属性设置为 “multipart/form-data”，因为这对于文件上传是必要的。
第4步 – 使用jQuery来处理文件上传 —
$(document).ready(function(){
$('#fileUploadForm').ajaxForm({
beforeSubmit: function(){
// do validation here
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var maxFileSize = 2097152; // 2 MB
var validFileExtensions = ["jpg", "jpeg", "png"];
var extension = file.name.split('.').pop().toLowerCase();
if(file.size > maxFileSize) {
alert("File size must be exactly 2 MB.");
return false;
}
if(validFileExtensions.indexOf(extension) === -1) {
alert("Invalid file type. Only JPEG and PNG files are allowed.");
return false;
}
},
success: function(response){
// handle response
var jsonResponse = JSON.parse(response);
if(jsonResponse.status === "success"){
alert("File upload successful!");
}else{
alert("File upload failed. Please try again.");
}
},
error: function(response){
// handle errors
alert("There was an error while uploading the file. Please try again later.");
}
});
});
这一步涉及到使用jQuery来处理文件的上传过程。ajaxForm方法被用来通过JavaScript提交表单，beforeSubmit、success和error函数被用来处理文件上传过程的各个阶段。
beforeSubmit函数用于在上传前验证文件，success函数用于处理文件上传后服务器的响应。error函数用来处理在文件上传过程中发生的任何错误。
第5步 – index.html文件的完整HTML与jQuery代码在此：
例子
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
</head>
<body>
<h1>Greetings from Tutorials Point!</h1>
<form id="fileUploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedFile">
<input type="submit" value="Upload">
</form>
<script>
(document).ready(function(){('#fileUploadForm').ajaxForm({
beforeSubmit: function(){
// do validation here
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var maxFileSize = 2097152; // 2 MB
var validFileExtensions = ["jpg", "jpeg", "png"];
var extension = file.name.split('.').pop().toLowerCase();
if(file.size > maxFileSize) {
alert("File size must be exactly 2 MB.");
return false;
}
if(validFileExtensions.indexOf(extension) === -1) {
alert("Invalid file type. Only JPEG and PNG files are allowed.");
return false;
}
},
success: function(response){
// handle response
var jsonResponse = JSON.parse(response);
if(jsonResponse.status === "success"){
alert("File upload successful!");
}else{
alert("File upload failed. Please try again.");
}
},
error: function(response){
// handle errors
alert("There was an error while uploading the file. Please try again later.");
}
});
});
</script>
</body>
</html>
第6步– 创建PHP服务器端脚本（ upload.php） 来处理文件上传–。
<?php
if(isset(_FILES['uploadedFile'])){errors= array();
file_name =_FILES['uploadedFile']['name'];
file_size =_FILES['uploadedFile']['size'];
file_tmp =_FILES['uploadedFile']['tmp_name'];
file_type =_FILES['uploadedFile']['type'];
file_ext=strtolower(end(explode('.',_FILES['uploadedFile']['name'])));
extensions= array("jpeg","jpg","png");
if(in_array(file_ext,extensions)=== false){errors[]="extension not allowed, please choose a JPEG or PNG file.";
}
if(file_size>2097152) {errors[]='File size must be excately 2 MB';
}
if(empty(errors)==true) {
move_uploaded_file(file_tmp,"upload/".file_name);
echo "Success";
}else{
print_r(errors);
}
}
?>
这个脚本首先使用isset函数和$_FILES超全局检查文件输入栏是否包含一个文件。然后，该脚本使用in_array函数和预先定义的允许的文件扩展名列表检查文件大小和文件扩展名。如果文件是有效的，则使用move_uploaded_file将其移动到服务器上的 “upload “目录。
总结
在这篇文章中，我们讨论了在HTML中为网页添加文件上传功能的两种方法。第一种方法是使用一个带有文件输入字段的基本HTML表单，然后将该表单发送到一个服务器端的脚本，处理文件的实际保存。第二种方法是使用jQuery和ajax，这种方法允许你处理文件上传过程，而不需要刷新页面。
这两种方法都需要适当的验证，以适当的方式存储文件，并在服务器端有适当的权限，还需要以适当的方式对文件名和扩展名进行消毒以确保安全。