jquery ajax+php实现文件上传

文件上传最方便的方式是form方式提交，但它在有些场景并不适合，需要使用ajax方式来实现上传文件，ajax直接调用后台是无法将file传送给后台，这时就需要引入formData,然后设置相关阐述，下面将详细阐述

一、dom结构和js结构

dom结构

<form id="form">
    <label for="file">文件名：</label>
    <input type="file" name="file" id="file"><br>
    <input type="button" name="submit" value="提交" id="btn">
</form>

js结构

1.$.post中contentType默认的值为：'application/x-www-form-urlencoded; charset=UTF-8，而文件上传一个是multipart/form-data，但是请求内容不只是文件上传。所有使用contentType:false

2.$.post中processData参数默认的值为true，会转数据格式，上传不需要转，所有使用processData: false

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $('#btn').click(function () {
        var formData = new FormData(document.getElementById("form"));
        console.log(formData)
        $.ajax({
            url: 'test.php',
            type: 'post',
            **contentType: false,**
**            processData: false,**
            data: formData,
            success: res => {
                console.log(res);
            }
        })
    })
</script>

二、php后台代码

<?php
**// 允许上传的图片后缀**
**$dd = $_POST['dd'];**
**$allowedExts = array("gif", "jpeg", "jpg", "png");**
**$temp = explode(".", $_FILES["file"]["name"]);**
**echo $_FILES["file"]["size"];**
**$extension = end($temp);     // 获取文件后缀名**
**if ((($_FILES["file"]["type"] == "image/gif")**
**|| ($_FILES["file"]["type"] == "image/jpeg")**
**|| ($_FILES["file"]["type"] == "image/jpg")**
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")*1
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 204800)   // 小于 200 kb
&& in_array($extension, $allowedExts))
{
    if ($_FILES["file"]["error"] > 0)
    {
        echo "错误：: " . $_FILES["file"]["error"] . "<br>";
    }
    else
    {
        echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
        echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
        echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>";
        
        // 判断当前目录下的 upload 目录是否存在该文件
        // 如果没有 upload 目录，你需要创建它，upload 目录权限为 777
        if (file_exists("upload/" . $_FILES["file"]["name"]))
        {
            echo $_FILES["file"]["name"] . " 文件已经存在。 ";
        }
        else
        {
            // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
            move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
            echo "文件存储在: " . "upload/" . $_FILES["file"]["name"].$dd;
        }
    }
}
else
{
    echo "非法的文件格式";
}
?>