檔案上傳最方便的方式是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 "非法的檔案格式";
}
?>