ajax 上传图片

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_34279061

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量48

点赞数

文章标签： javascript json php ViewUI

本文介绍了一种利用HTML和jQuery实现的头像上传功能。通过表单提交文件，并使用AJAX进行异步请求，向指定URL发送POST请求来完成文件上传。文中详细展示了如何选择文件、触发上传事件及成功后的回调处理。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <from action="" enctype="multipart/form-data" method="post">
        <a>
            <span>修改头像</span>
            <input type="file" id="fileUp">
        </a>
    </from>

    <script>
        var fileM=document.querySelector("#fileUp");
        $("#fileUp").on("change",function() {
            //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
            var fileObj = fileM.files[0];
            //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
            var formData = new FormData();
            formData.append('file', fileObj);
            $.ajax({
                url: "http://localhost:8089/index.php",
                type: "post",
                dataType: "json",
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (json_data) {
                    alert("恭喜你！上传成功");
                },
            });
        });
    </script>
</body>
</html>