HTML 输入文件上传个人资料图片

在网页开发中，上传个人资料图片是比较常见的一项功能。本文将介绍如何通过 HTML 输入文件上传个人资料图片。

HTML 文件上传表单

HTML 文件上传表单使用 <input> 标签，并将 type 属性设置为 "file"。下面是一个简单的 HTML 文件上传表单：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="profile_image">
  <input type="submit" value="Upload">
</form>

上述表单中，action 属性指定了表单数据的提交地址，method 属性指定了提交方法为 POST 请求，enctype 属性指定了表单数据的传输格式为 multipart/form-data。

其中，<input> 标签的 type 属性设置为 "file"，name 属性设置为 "profile_image"，表示上传的图片文件将会以 "profile_image" 作为键名进行提交。

服务器端处理上传文件

一般情况下，服务器端处理上传文件需要使用相应的编程语言进行处理。以 PHP 为例，简单处理上传文件的代码如下：

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["profile_image"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// 检查文件类型
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// 检查文件大小
if ($_FILES["profile_image"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// 检查上传状态
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
} else {
    if (move_uploaded_file($_FILES["profile_image"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["profile_image"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

上述代码使用了 PHP 自带的 move_uploaded_file 函数将上传的文件保存到指定的目录。

前端图片预览功能

为了提供更良好的用户体验，可以在用户选中图片后进行图片预览。下面是一个简单的做法：

<script>
function previewImage(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#preview').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
</script>
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="profile_image" onchange="previewImage(this);">
  <input type="submit" value="Upload">
</form>
<img id="preview" src="#" alt="Preview">

上述代码使用了 HTML5 的 FileReader API，通过 onchange 事件监听文件选择，并将打开的文件通过 FileReader 读取为数据 URL，然后将其设置为图片预览的 src 属性。

总结

本文介绍了使用 HTML 文件上传表单上传个人资料图片的方法，以及如何在前端预览图片。通过上述方法，可以方便地实现上传和预览个人资料图片的功能。