Ajax文件上传

最新推荐文章于 2025-02-22 14:38:27 发布

蒸蒸日上y

最新推荐文章于 2025-02-22 14:38:27 发布

阅读量292

点赞数 1

CC 4.0 BY-SA版权

分类专栏：代码笔记文章标签： ajax html 前端

本文链接：https://blog.youkuaiyun.com/zrainload/article/details/78836911

代码笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用FormData实现HTML表单提交及文件无刷新上传功能。通过前端JavaScript与后端PHP结合，演示了文件上传的具体步骤，包括前端表单元素获取、FormData构造、AJAX异步请求以及后端文件接收与保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用FormData实现HTML表单提交以及文件无刷新上传

前端HTML代码：

!DOCTYPE html>
<html>
<head>
    <title>ajax文件上传</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="form1">
        指定文件名：<input type="text" name="uname">
        选择文件：<input type="file" name="img">
        <input type="button" id="btn" value="上传">
    </form>
</body>
</html>

前端js代码：

<script src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $("#btn").click(function(){
        var formData = new FormData($("#form1")[0]);
        $.ajax({
            type: 'post',
            url: './upload.php',
            data: formData,
            contentType: false, //必须false才会自动加上正确的Content-Type
            /**
             * processData必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false, 
            dataType: 'json',
            success:function(result){
                if(result.code === '200'){
                    alert(result.message);
                }
            },
            error: function () {
                alert("上传失败！");
                return false;
            }
        });
    });
</script>

服务端PHP代码：

<?php
header('content-type:text/html;charset=utf-8');

/**
 * 怎么接值
 */
$uname = isset($_POST['uname']) ? $_POST['uname'] : ''; //普通的值
$file_info = isset($_FILES['img']) ? $_FILES['img'] : []; //图片的信息

//文件上传代码
move_uploaded_file($file_info["tmp_name"], "./" . $_FILES["img"]["name"]);
$result = [
    'code' => '200',
    'message' => '上传成功',
];

echo json_encode($result);