PHP Ajax Form 实现图片上传并预览

周予安

发布时间：2026-10-13| 3人浏览过

原创

通过组合 PHP 后端校验与前端 jQuery form.js 插件，可以高效实现无需页面刷新的异步图片上传功能。本方案涵盖了文件类型白名单过滤、体积限制以及上传成功后的实时预览与数据回显流程。

结果目标与准备

该方案旨在解决传统表单提交导致的页面跳转问题，允许用户在上传图片后即时看到预览效果，同时确保上传安全。

前置条件：

环境支持 PHP 运行。
引入 jQuery 库（示例中使用了较旧版本，实际应用中建议升级至最新版本）。
引入 jquery.form.js 插件以简化 AJAX 表单提交。
在服务器目录中存在一个可写入的上传文件夹（如 upload/）。

第1步：编写 PHP 后端上传逻辑

此部分负责接收文件、验证合法性并存储到服务器。

1.配置基础参数

设置允许上传的文件扩展名列表（白名单）及文件大小限制（示例中为 5MB），以防止恶意攻击或无效请求。

2.执行校验逻辑

脚本首先检查是否为有效的上传请求，随后解析文件名、错误码、类型等信息。通过 switch 语句对照 $_FILES['file']['error'] 判断是否存在传输错误（如未选中文件或只上传了部分）。接着进行自定义校验，包括检查扩展名是否在允许的范围内，以及物理文件大小是否超出阈值。

3.保存文件

当所有校验通过后，生成基于时间和随机数的新文件名以避免覆盖，调用 move_uploaded_file 将临时文件转移至指定路径，并返回 JSON 格式的成功状态及文件路径。

<?php
$file_upload = "upload/";
// 限制文件类型白名单
$file_allow_ext='gif|jpg|jpeg|png|zip|rar|ppt|xls|pdf|pptx|xlsx|docx';
// 限制最大大小为 5MB
$file_allow_size = 5*1024*1024;

if(isset($_POST['submit']) && $_POST['submit']==="上传"){
    if(is_uploaded_file($_FILES['file']['tmp_name'])){
        $file_name = $_FILES['file']['name'];
        $file_error = $_FILES['file']['error'];
        $file_type = $_FILES['file']['type'];
        $file_tmp_name = $_FILES['file']['tmp_name']; 
        $file_size = $_FILES['file']['size'];
        // 提取文件后缀
        $file_ext = substr($file_name, strrpos($file_name, '.')+1);

        switch($file_error){
            case 0:
                $data['status'] = 0;
                $data['msg'] = "文件上传成功!";  
                break;
            case 1:
                $data['status'] = 1;
                $data['msg'] = "文件过大，超过限制: " . sizeFormat($file_allow_size);
                break;
            case 3:
                $data['status'] = 1;
                $data['msg'] = "只有部分文件被上传";
                break;
            case 4:
                $data['status'] = 1;
                $data['msg'] = "没有文件被上传";
                break;
            case 5:
                $data['status'] = 1;
                $data['msg'] = "上传文件大小为0";
                break; 
        }
        
        // 校验扩展名
        if(stripos($file_allow_ext, $file_ext) === false){
            $data['status'] = 1;
            $data['msg'] = "该文件扩展名不允许上传";
        }
        // 再次校验大小
        if($file_size > $file_allow_size){
            $data['status'] = 1;
            $data['msg'] = "文件大小超过限制,只能上传" . sizeFormat($file_allow_size) . "的文件!";
        } 

        if($data['status'] == 1){
            exit(json_encode($data)); 
        }

        // 保存文件
        if(file_exists($file_upload)){   
           $file_new_name = date("YmdHis").'_'.rand(10000,99999).'.'.$file_ext;
           $file_save_path = $file_upload.$file_new_name; 
           $data['status'] = 0;  
           $data['url'] = $file_save_path;
           move_uploaded_file($file_tmp_name, $file_save_path);
           exit(json_encode($data));    
        } else {
            $data['status'] = 1;
            $data['msg'] = "上传目录不存在";
            exit(json_encode($data));
        }  
    }
}

function sizeFormat($size)
{
 $sizeStr='';
 if($size<1024)
 {
  return $size."bytes";
 }
 else if($size<(1024*1024))
 {
  $size=round($size/1024,1);
  return $size."KB";
 }
 else if($size<(1024*1024*1024))
 {
  $size=round($size/(1024*1024),1);
  return $size."MB";
 }
 else
 {
  $size=round($size/(1024*1024*1024),1);
  return $size."GB";
 } 
}
?>

第2步：构建前端 HTML 与 AJAX 交互

前端需提供一个带有 multipart/form-data 编码类型的表单，并使用 JavaScript 拦截默认提交行为。

1.导入依赖

务必先加载 jQuery，再加载 jquery.form.js。注意原草稿中的 CDN 源已失效，生产环境请替换为本地部署或稳定 CDN（如 cdnjs 或 unpkg）。

2.配置 AjaxForm 选项

初始化 ajaxForm，指定提交方法为 POST，返回类型为 JSON。在 success 回调中处理后端返回的数据：若状态为 0（成功），则动态创建 <img> 标签插入页面并显示；若失败，则弹出提示。

<!-- 表单结构 -->
<form action="dofile.php" method="post" enctype="multipart/form-data" id="upfileimage">
    <label for="file">选择图片:</label>
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="上传" />
</form>

<!-- 引入库 (请替换为可用的CDN地址) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.form.js"></script>

<script>
    $("#upfileimage").submit(function(){
        if($("input[type=file]").val()==""){
            alert("请选择要上传的文件");
            return false;
        }
    });

    $(function(){
        var options = {  
            type:"POST",
            dataType:"json",
            resetForm:true,
            success:function(o){
               if(o.status==1){
                   alert(o.msg);
               }else{
                   // 显示图片预览
                   $("body").append("<img src='"+o.url+"' alt='' width='100' style='margin-top:10px;'/>");
               }
            },
            error:function(xhr, status, err){
                alert("上传出错: " + err);
            }  
        }  
        $("#upfileimage").ajaxForm(options);
    });
</script>