前端Ajax提交文件类型

山川V

于 2018-04-17 09:12:41 发布

阅读量1k

点赞数

分类专栏：前端

前端专栏收录该内容

0 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_send</title>
</head>
<body>
<h3>Ajax上传文件</h3>

<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>

<button id="upload_button">提交</button>


<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#upload_button").click(function(){

        var username=$("#username").val();
        var upload_file=$("#upload_file_ajax")[0].files[0];    # 拿到上传的文件

        var formData=new FormData();                 // 生成FormData对象
        formData.append("username",username);              // 组装字符型键值对
        formData.append("upload_file_ajax",upload_file);   // 组装文件类型的键值对


        $.ajax({
            url:"http://192.168.3.190:8000/api/v1/user/login/face",
            type:"POST",
            data:formData,
            contentType:false,      # 必须要写
            processData:false,      # 必须要写

            success:function(){
                alert("上传成功!")
            }
        });


    })
</script>
</body>
</html>