jQuery+ThinkPHP实现图片上传

下面我会详细讲解如何使用jQuery和ThinkPHP实现图片上传的完整攻略，包含以下几个步骤：

1. 在HTML页面中创建上传表单，并引入所需的jQuery库文件和处理上传的PHP文件；
2. 使用jQuery实现图片上传的功能，包括创建FormData对象、绑定change事件、使用ajax向服务器发送数据；
3. 在PHP文件中编写处理上传的代码，包括创建目标文件夹、获取上传的文件信息、进行文件类型检查、移动文件到目标文件夹；
4. 在HTML页面中添加上传成功的提示信息，提示用户上传成功。

下面具体来讲解这几个步骤。

1. 创建上传表单并引入文件

首先需要在HTML页面中创建一个上传文件的表单，如下所示：

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" id="uploadFile" name="uploadFile">
    <input type="submit" value="上传">
</form>

需要注意的是，表单的enctype属性必须设置为multipart/form-data，而且<input>标签的name属性和后台接收上传文件的变量名必须一致。在表单中需要引入jQuery.js和jQuery.form.js的库文件，以及后台文件upload.php。代码如下：

<script src="jquery.js"></script>
<script src="jquery.form.js"></script>

2. 使用jQuery实现图片上传

接下来需要使用jQuery来实现图片上传的功能。首先需要创建一个FormData对象，然后将表单中的文件信息添加到FormData对象中。使用change事件绑定在上传文件的<input>上，当文件选择完成后，调用ajax发送FormData对象到后台进行处理。

$(function() {
    $('#uploadFile').change(function() {
        var formData = new FormData($('#uploadForm')[0]);
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(result) {
                if (result.success) {
                    alert('上传成功！');
                } else {
                    alert('上传失败，请重试。');
                }
            },
            error: function() {
                alert('上传失败，请重试。');
            }
        });
    });
});

3. 在PHP文件中编写处理上传的代码

在上传文件的PHP文件中，需要对上传的文件进行处理，包括创建目标文件夹、获取上传的文件信息、进行文件类型检查、移动文件到目标文件夹等操作。示例代码如下：

<?php
// 设置目标文件夹
$targetFolder = '/uploads/';

// 如果目标文件夹不存在，创建目标文件夹
if (!is_dir($targetFolder)) {
    mkdir($targetFolder, 0777, true);
}

// 获取上传文件的信息
$fileName = $_FILES['uploadFile']['name'];  // 文件名
$fileType = $_FILES['uploadFile']['type'];  // 文件类型
$fileSize = $_FILES['uploadFile']['size'];  // 文件大小
$fileError = $_FILES['uploadFile']['error'];  // 文件上传错误代码
$fileTmpName = $_FILES['uploadFile']['tmp_name'];  // 临时文件名

// 检查上传文件的类型
$allowedTypes = array('image/png', 'image/jpeg', 'image/gif');
if (!in_array($fileType, $allowedTypes)) {
    echo json_encode(array('success' => false));
    exit;
}

// 移动上传文件到目标文件夹
$targetPath = $targetFolder . $fileName;
if (!move_uploaded_file($fileTmpName, $targetPath)) {
    echo json_encode(array('success' => false));
    exit;
}

// 返回上传成功的结果
echo json_encode(array('success' => true));
?>

4. 添加上传成功的提示信息

最后，在HTML页面中添加上传成功的提示信息，提示用户上传成功。示例代码如下：

success: function(result) {
    if (result.success) {
        alert('上传成功！');
    } else {
        alert('上传失败，请重试。');
    }
}

至此，一个基于jQuery和ThinkPHP的图片上传功能就完成了。