使用AJAX实现上传文件

为了未来好一点,现在苦一点有什么。都要更有勇气对明天说:我愿意。养成好习惯是储存健康,放纵不良是透支生命。梦不是为想象,而是让我们继续前往。

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

需求:

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

前端代码

<form   id="uploadForm"  method="post" enctype="multipart/form-data">
   <label  >上传电子书</label>
   <input type="file"  name="file" >
   <button  id="upload" type="button"  name="button" >上传</button>
</form>
$("#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”的话,提交完数据会刷新一次页面。

到此这篇关于使用AJAX实现上传文件就介绍到这了。优秀的人,不是与生俱来就领先一步,也不一定比别人更加幸运。他们中的多数,只是在任何一件小事上,都对自己有所要求,不因舒适而散漫放纵,不因辛苦而放弃追求。雕塑自己的过程,必定伴随着疼痛与辛苦,那一锤一凿的敲打,终能让我们收获一个更好的自己。更多相关使用AJAX实现上传文件内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

标签: 上传文件 AJAX