前端html+ajax+js+后端实现上传文件,无需任何插件

news/2024/7/10 22:45:34 标签: ajax, java, jquery, javascript, html

需求:

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

前端代码

<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]);
   $.html" title=ajax>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提交给后台

后端代码

html" title=java>java">@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”的话,提交完数据会刷新一次页面。


http://www.niftyadmin.cn/n/1183888.html

相关文章

mysql 函数 select SUBSTRING_INDEX(vPART_ID, '/', 1)

select * from lackgoodsapplybillbase a inner join lackgoodsapplybillinfo b on a.vLACKGOODSAPPLY_IDb.vLACKGOODSAPPLY_ID where b.vPART_ID not in (select SUBSTRING_INDEX(vPART_ID, /, 1) from materbaseinfo) order by a.dOPERATE_DATE DESC 转载于:https://www.…

Linux服务优化详解

本文出自 “寒冰BLOG” 博客&#xff0c;请务必保留此出处http://hanbing.blog.51cto.com/40347/85640服务有三类1。用Init启动的&#xff0c;在/etc/inittab 中定义2。Launch by System-V Startup Script3。由xinetd管理,在/etc/xinetd.d/中定义用chkconfig --list看的话&…

Tessract训练样本字库

1. 下载jTessBoxEditor训练软件 可从网上下载或者以下链接 https://download.csdn.net/download/weixin_47142014/34862026?spm1001.2014.3001.5503 2.下载后的文件夹 双击文件夹下的train.bat 3.样本图片准备&#xff08;进行训练的样本图片越多越好&#xff09; 4.使用jT…

在SAP中如何实现现金流量表? FI Monthly Closed

SAP现金流量表 在SAP中如何实现现金流量表&#xff1f; 问&#xff1a;请问有没有人做过中国的现金流量表&#xff0c;能否介绍一下在SAP中如何实现现金流量表比较准确容易。 答&#xff1a;1。利用TR模块的承诺项目来做&#xff0c;调用系统的一个标准程序&#xff0c;再写一个…

WEB前端和后端实现验证码验证登录,使用HTML CSS JS 和后端springboot

文章目录验证码作用效果图代码部分一、HTML代码二、JS代码三、后端代码验证码作用 验证码一般是防止有人利用机器人自动批量注册、对特定的注册用户用特定程序暴力破解方式进行不断的登陆、灌水。因为验证码是一个混合了数字或符号的图片&#xff0c;人眼看起来都费劲&#xff…

win 2003 server的一些优化设置

1.禁用配置服务器向导: 禁止“配置你的服务器”&#xff08;Manage Your Server&#xff09;向导的出现&#xff1a;在控制面板&#xff08;Control Panel&#xff09; -> 管理员工具&#xff08;Administrative Tools &#xff09;-> 管理你的服务器&#xff08;Manage…

Google Developer Day 2008

这几天太忙&#xff0c;今天才把参加Google Developer Day 2008的感受补上&#xff0c;简单记录一下吧。从长春去北京购买的是Z62直达的火车&#xff0c;由于火车票比较紧张&#xff0c;购买的是一张软卧&#xff0c;舒服是很舒服&#xff0c;但是价格贵了一些&#xff0c;车厢…

Anthem 异步调用web服务

添加web服务应用 触发事件&#xff1a; οnclick"GetProductsList();" 客户端js主体&#xff1a; function GetProductsList() { var maxamount document.getElementById("txtPrice").value; //获取客户输入数据参数 //Anthem异步调用服务器端GetProducts…