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

2 篇文章 0 订阅

需求:

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

前端代码

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

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
### 回答1: 前端通过formdata的方式上传文件,可以使用表单文件控件或者通过js代码创建formdata对象进行上传。对于表单控件上传,需要在form标签中设置enctype属性为multipart/form-data,然后在input标签中设置type属性为file,这样即可将文件存储在formdata对象中。如果通过js代码创建formdata对象,直接通过append方法将文件添加到对象中,如下所示: ``` let formData = new FormData(); formData.append('file', file); ``` 其中,file为需要上传的文件对象。 后端使用koa-body中间件可以方便地处理上传的文件。先要在koa应用中使用该中间件,然后通过ctx.request.files获取上传的文件,如下所示: ``` const Koa = require('koa'); const koaBody = require('koa-body'); const app = new Koa(); app.use(koaBody({ multipart: true, // 支持文件上传 formidable: { maxFileSize: 200*1024*1024, // 设置上传文件大小,默认2M } })); app.use(async (ctx) => { const file = ctx.request.files.file; console.log(file.name, file.size); // 打印上传的文件名和大小 ctx.body = '上传成功'; }) ``` 其中,multipart设置为true表示支持文件上传,formidable对象中的maxFileSize表示最大上传文件大小,默认为2M。在处理上传的文件时,获取文件对象通过ctx.request.files即可,可以获取文件名、类型、大小等信息。最后,需要设置返回的数据为上传成功即可。 ### 回答2: 前端实现文件上传的过程中,需要使用到formdata对象,formdata对象可以支持上传文件、文本信息以及表单数据等。要进行文件上传,需要注意选择文件类型的input的属性设置为"file",然后通过formdata对象将文件添加到数据中,在使用Ajax等技术将数据发送给后端。在使用formdata上传文件时,需要注意不同浏览器之间formdata对象的兼容性,可以使用polyfill等技术来进行统一。 对于后端的Koa框架来说,接收上传的文件可以使用koa-body中间件。koa-body中间件可以接收文件、文本信息以及表单数据等,可以将上传文件保存在指定的路径下,并且将上传的文件信息添加到ctx.request.body中进行统一管理。在使用koa-body中间件时,需要注意对于文件大小、上传路径、文件格式等进行配置管理,以免出现上传失败或者数据丢失的情况。 除此之外,如何管理和处理上传的文件也是需要考虑的重点,可以考虑使用nodejs中的fs模块进行文件操作,或者使用第三方插件如multer等来进行统一管理。在处理上传的文件时,还要注意对于文件大小、路径、格式进行校验和处理,以确保数据的有效性和安全性。 ### 回答3: 前端使用Formdata来上传文件,示例如下: ``` const formData = new FormData() formData.append('file', file) axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then((res) => { console.log(res.data) }) ``` 后端使用koa-body来接收上传的文件,示例如下: ``` const Koa = require('koa') const koaBody = require('koa-body') const app = new Koa() app.use(koaBody({ multipart: true, formidable: { uploadDir: './uploads', // 上传文件保存的路径 keepExtensions: true, // 保留文件扩展名 maxFieldsSize: 2 * 1024 * 1024 // 最大文件大小为2MB } })) app.use(async (ctx) => { const file = ctx.request.files.file console.log(file) // 处理文件逻辑 }) app.listen(3000) ``` 其中,koa-body需要设置multipart为true,表示支持文件上传,formidable则可以设置一些参数,如uploadDir表示文件保存的路径,keepExtensions表示是否保留文件扩展名,maxFieldsSize表示最大文件大小,可以根据需要进行调整。在处理请求时,可以通过ctx.request.files.file获取上传的文件信息,然后进行相应的业务逻辑处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Accccccccv

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值