ajax上传数据

最新推荐文章于 2021-08-06 17:49:44 发布

weixin_30329623

最新推荐文章于 2021-08-06 17:49:44 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/javalisong/p/9585465.html

本文详细介绍了使用AJAX实现文件上传的方法，包括如何获取表单数据、序列化数据、设置AJAX请求参数以及处理响应等关键步骤，并给出了从前端到后端的完整示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---恢复内容开始---

ajax上传数据，（简洁版）

1.上传普通同表单标签内容。

1.获取表单的内容

var file=$('#file').val();（放在点击事件后面）

var file = document.getElementById().value

2.序列化数据

var dd ={"file":file};（也就是搞成键值对的形式）

3.用ajax上传数据

data:JSON.stringify(文件名),

把对象的类型转换为json字符串类型

4.后台用RequestBody Map<>接收

2.上传文件，比如照片

1.获取表单内容，方法同上

var file = document.getElementById("file").files[0];
    var formFile = new FormData();
    formFile.append("file", file); //加入文件对象
    var data = formFile;

注意id后是files[0];不知为何，总之加上这句话就可以了。以后要用到的时候再详细了解。

还要实例化FormData这个对象。没有这个传过去的就不是文件格式了

2.ajax传过去

$.ajax({
        url: "addfilel",
        data: data,
        type: "Post",
        dataType: "json",
        cache: false,//上传文件无需缓存
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
        error:function () {
          alert("请求失败")
        },
        success:function (data) {
            var ss=data.file;
            document.getElementById("di").innerHTML='<img src="../statics/'+ss+'" />';
        }

这次的不要变成json就可直接传送了。

3.后台对文件进行操作

@RequestMapping(value = "/addfilel", method = RequestMethod.POST)
    @ResponseBody
    public Map<String,String> sendString(@RequestBody MultipartFile file)throws Exception{  //user是与页面参数对应的JavaBean
        //map集合用来存放返回值
        String filename=file.getOriginalFilename();
        int intt = filename.lastIndexOf(".");
        String str = filename.substring(intt);
        String newname= UUID.randomUUID()+str;
        newname = newname.replace("-", "");
        String  path="D:/idea_workspace/orgajks/src/main/webapp/statics";
        String str2=  FilenameUtils.concat(path,newname);
        file.transferTo(new File(str2));
        Map<String,String> Map = new HashMap<String, String>();
        Map.put("file",newname);
        return Map;
    }