jQuery+php实现ajax文件即时上传的详解

如何使用jQuery和PHP实现ajax文件即时上传？

下面，我来给大家详细讲解一下这个问题的解决方案。需要注意的是，为了方便讲解，本篇示例中使用了jQuery的ajax方法，另外，上传文件会涉及到文件访问权限和安全问题，请务必做好相关设置。

步骤一：HTML页面制作

首先，我们需要制作一个HTML页面，用来在用户点击“上传文件”按钮时触发上传操作。以下是一个简单的示例：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ajax即时上传文件</title>
</head>
<body>
    <form enctype="multipart/form-data" id="uploadForm">
        <input type="file" name="uploadFile"/><br/>
        <input type="button" value="上传文件" id="fileUpload"/>
    </form>
    <div id="upload_result"></div>
</body>
</html>

在这个HTML页面中，我们创建了一个表单，用来包含上传文件的input元素，并新增了一个id为"fileUpload"的button元素，表示在用户点击这个按钮时触发上传操作。

步骤二：jQuery代码实现

为了使“上传文件”按钮能够被点击时触发上传操作，我们需要添加一些jQuery代码，并引入所需的JavaScript库。下面是一个简单的示例：

<script src="//cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#fileUpload").click(function(){
        var formData = new FormData($("#uploadForm")[0]);
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formData,
            dataType: "json",
            cache: false,
            processData: false,
            contentType: false,
            success: function(data){
                $("#upload_result").text(data.msg);
            },
            error: function(){
                alert("上传失败，请重试！");
            }
        });
    });
});
</script>

在这个代码中，我们首先使用了jQuery的ready方法，使得在文档加载完成后再执行上传操作。然后，我们让上传按钮点击时，通过FormData将表单数据包装成一个FormData实例，并使用jQuery的ajax方法，将这个实例POST到服务器上的upload.php文件中。

需要注意的是，在ajax方法中，我们设置了以下相关参数：

url：上传文件的处理程序的URL。
type：表单提交方式。这里使用POST方式。
data：要上传的表单数据，即FormData实例。
dataType：所期望的服务器响应的数据类型。这里使用JSON格式。
cache、processData和contentType：这三个参数表示对上传文件的处理方式。设置为false表示禁用。

步骤三：PHP代码实现

最后，我们需要在服务器上编写PHP处理程序，对上传的文件进行处理。以下是一个简单的示例：

<?php
if(!empty($_FILES["uploadFile"])){
    $file = $_FILES["uploadFile"];
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $extension = end(explode(".", $file["name"]));
    if (($file["size"] < 2048000) && in_array($extension, $allowedExts)){
        if ($file["error"] > 0){
            $result = array("code"=>1, "msg"=>"上传文件失败，错误码为：".$file["error"]);
            echo json_encode($result);
        }else{
            move_uploaded_file($file["tmp_name"], "upload/".$file["name"]);
            $result = array("code"=>0, "msg"=>"上传文件成功");
            echo json_encode($result);
        }
    }else{
        $result = array("code"=>1, "msg"=>"上传文件格式不正确或文件大小超过了2M，请检查后重新上传");
        echo json_encode($result);
    }
}else{
    $result = array("code"=>1, "msg"=>"上传文件失败，请重试");
    echo json_encode($result);
}
?>

在这个PHP代码中，我们首先判断了上传文件的类型和大小，如果不符合要求，就给出错误提示信息。否则，就将上传的文件移动到upload文件夹中，并给出上传成功的提示信息。

其中，我们使用了$_FILES数组来获取上传文件信息，然后使用move_uploaded_file函数，将上传的文件移动到指定目录下。最后，按照JSON格式返回执行结果。

注意事项：

在执行以上示例代码前，请根据自己的实际情况修改代码中的参数设置；
上传文件时，要求目录必须有写权限；
上传的文件必须是图片格式（jpg、jpeg、png、gif）；
上传的文件大小不能超过2M。

以上就是使用jQuery和PHP实现ajax文件即时上传的详细攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+php实现ajax文件即时上传的详解 - Python技术站

jQuery+php实现ajax文件即时上传的详解

相关文章