ajax：通过form-data上传表单信息（text文本+file图片）

侬开心就好

于 2020-07-16 14:35:05 发布

阅读量307

点赞数

文章标签： ajax js java

本文链接：https://blog.csdn.net/weixin_40717742/article/details/107382289

版权

前台代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片上传</title>
</head>
<body>
<h2>File上传</h2>
<div class="file_class">
    <form action="##" method="post"  enctype="multipart/form-data" name="myform">
        图片:<input type="file"  name="upload" id="fileName"/><br/>
        姓  名:<input type="text"  name="name" id="name"/><br/>
        身份证:<input type="text"  name="idNumber" id="idNumber"/><br/>
        <button class="btn" type="button" onclick="file_upload()"><i class="icon-ok"></i> 确定</button>
    </form>
</div>
<script src="../../../resource/jqweui/js/jquery-2.1.4.js"></script>
<script type="text/javascript">
    /*file上传按钮*/
    function file_upload() {
        var type = "file";
        var formData = new FormData();//这里需要实例化一个FormData来进行文件上传
        formData.append(type,$("#fileName")[0].files[0]);
        formData.append("name",$("#name").val());
        formData.append("idNumber",$("#idNumber").val());
        console.log(formData);
        $.ajax({
            type: "post",
            url: "url请求地址",
            data: formData,
            dataType: "json",
            processData:false,
            contentType: false,
            success: function (data) {
                if (data.resultMessage == "验证成功") {
                    alert("验证成功！");
                }else{
                    alert("信息不匹配！");
                }
            },
            error : function() {
                alert("异常！");
            }
        });
    }
</script>
</body>
</html>

后台接收：

 @RequestMapping("url请求地址")
    @ResponseBody
    public String ctid_ids(@RequestParam MultipartFile file, String name, String idNumber,String filepath) throws Exception {
       //逻辑处理
       Map<String, String> end = new HashMap<String, String>();
       return JsonTools.toJson(end);

    }

侬开心就好

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax：通过form-data上传表单信息（text文本+file图片）

前台代码：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传</title></head><body><h2>File上传</h2><div class="file_class">
复制链接

扫一扫