使用AJAX实现上传文件

本文实例为大家分享了使用AJAX实现上传文件的具体代码，供大家参考，具体内容如下

需求：

在前端页面选择文件上传到服务器的指定位置

前端代码

   上传电子书      上传

$("#upload").click(function () {   var formData = new FormData($('#uploadForm')[0]);   $.ajax({    type: 'post',    url: "https://****:8443/fileUpload", //上传文件的请求路径必须是绝对路劲     data: formData,     cache: false,     processData: false,     contentType: false,      }).success(function (data) {        console.log(data);        alert("上传成功"+data);        filename=data;      }).error(function () {         alert("上传失败");     });    });

首先创建一个FormData实例，也就是空对象，将页面中现有form表单将他初始化。通过AJAX提交给后台

后端代码

@PostMapping(value = "/fileUpload")    @ResponseBody    public String  fileUpload(@RequestParam(value = "file") MultipartFile file, Model model, HttpServletRequest request) {        if (file.isEmpty()) {            System.out.println("文件为空空");        }            String fileName = file.getOriginalFilename();  // 文件名            System.out.println(file.getOriginalFilename());            String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名            String filePath = "C://pdf//"; // 上传后的路径            fileName = UUID.randomUUID() + suffixName; // 新文件名            File dest = new File(filePath + fileName);            System.out.println("pdf文件路径为："+dest.getPath());            if (!dest.getParentFile().exists()) {                dest.getParentFile().mkdirs();                System.out.println("上传pdf文件+++++++++++");                System.out.println("pdf文件路径为："+dest.getPath());            }            try {                file.transferTo(dest);            } catch (IOException e) {                e.printStackTrace();            }            String filename = "/pdf/" + fileName;          return fileName;    }

注意

1.@RequestParam(value = “file”) 中的file需要和input中的name属性一致。
2.提交按钮类型Type=“Button”如果为“submit”的话，提交完数据会刷新一次页面。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。