输入框中自动回显上传的文件名：循序渐进指南

2024-03-14 06:19:52

在输入框中自动回显上传的文件名：分步指南

简介

在网页开发中，当用户上传文件时，显示上传的文件名是至关重要的。本文将提供一个循序渐进的指南，指导你如何使用 PHP 和 HTML 在输入框中自动回显上传的文件名。

步骤

创建 HTML 表单

首先，创建一个 HTML 表单以处理文件上传，其中包含一个文件输入元素和一个提交按钮。

<form action="add.php" method="post" enctype="multipart/form-data">
    <input type="file" name="the_file">
    <input type="submit" name="submit" value="上传">
</form>

处理文件上传

在 add.php 文件中编写 PHP 代码来处理文件上传。move_uploaded_file() 函数可用于将文件移动到指定目录。

<?php
// 定义上传目录
$upload_dir = "uploads/";

// 处理文件上传
if (isset($_POST['submit'])) {
    // 获取上传的文件信息
    $file_name = $_FILES['the_file']['name'];
    $file_size = $_FILES['the_file']['size'];
    $file_tmp_name = $_FILES['the_file']['tmp_name'];
    $file_type = $_FILES['the_file']['type'];

    // 验证文件大小和类型
    if ($file_size > 1000000) {
        echo "文件大小超出限制";
    } elseif (!in_array($file_type, array('image/jpeg', 'image/png'))) {
        echo "只允许上传 JPG 或 PNG 文件";
    } else {
        // 移动上传的文件
        move_uploaded_file($file_tmp_name, $upload_dir . $file_name);
    }
}
?>

回显文件名

在 add.php 文件中使用 PHP 代码将上传的文件名回显到输入框中。

<input type="text" value="<?php echo $file_name; ?>" name="file_name">

示例

add.php

<?php
// 定义上传目录
$upload_dir = "uploads/";

// 处理文件上传
if (isset($_POST['submit'])) {
    // 获取上传的文件信息
    $file_name = $_FILES['the_file']['name'];
    $file_size = $_FILES['the_file']['size'];
    $file_tmp_name = $_FILES['the_file']['tmp_name'];
    $file_type = $_FILES['the_file']['type'];

    // 验证文件大小和类型
    if ($file_size > 1000000) {
        echo "文件大小超出限制";
    } elseif (!in_array($file_type, array('image/jpeg', 'image/png'))) {
        echo "只允许上传 JPG 或 PNG 文件";
    } else {
        // 移动上传的文件
        move_uploaded_file($file_tmp_name, $upload_dir . $file_name);
    }
}
?>

<form action="add.php" method="post" enctype="multipart/form-data">
    <input type="file" name="the_file">
    <input type="submit" name="submit" value="上传">
    <input type="text" value="<?php echo $file_name; ?>" name="file_name">
</form>

index.html

<form action="add.php" method="post" enctype="multipart/form-data">
    <input type="file" name="the_file">
    <input type="submit" name="submit" value="上传">
</form>