ajax 上传图片

 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>

 

 

 

 

posted @ 2018-04-11 10:36  贝尔塔猫  阅读(192)  评论(0)  编辑  收藏  举报