AJAX实现文件上传功能报错Current request is not a multipart request详解

想做一个文件上传，spring boot配合Ajax来进行。却报错：Current request is not a multipart request

这是错误截图：

当时发生这种错误，我是很震惊的，我以为找了很多办法来解决。

有以下办法，当然这些并未解决我的问题，但是部分有用，就先列举出来：

1.在页面头部加入信息：

<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />

此方法 未解决 问题！

2.在form表单加入属性：enctype

<form method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
</form>

此方法 未解决 问题！

3.后端：@RequestParam MultipartFile file 改为 @RequestPart MultipartFile file

此方法 未解决 问题！

还有个别方法。。。都不行

下面是解决方法，我之前的ajax代码：

$('#upload-ok').click(function () {
        var form = document.getElementById("upload-form");
        var file = new FormData(form);
        $.ajax({
            url: "/addFile",
            type: "POST",
            processData:false,
            contentType:false,
            data:{
                "file":file
            },
            success: function (date) {
                xxxxxx
            },
            error: function (date) {
                xxxxxx
            }
        })
    })

正确代码：

$('#upload-ok').click(function () {
        var form = document.getElementById("upload-form");
        var file = new FormData(form);
        $.ajax({
            url: "/addFile",
            type: "POST",
            processData:false,
            contentType:false,
            //重要部分，data的传的是整个表单，不用大括号包裹；不用自定义变量名
            data:file,
            success: function (date) {
                xxxxxx
            },
            error: function (date) {
                xxxxxx
            }
        })
    })

就这样，解决！！！

到此这篇关于AJAX实现文件上传功能报错Current request is not a multipart request详解的文章就介绍到这了,更多相关AJAX文件上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Ajax实现文件上传功能(Spring MVC)

    Ajax实现文件上传功能(Spring MVC)

    本文实例为大家分享了Ajax实现文件上传的具体代码,供大家参考,具体内容如下 前端表单 和 JQuery jsp/html代码 使用JQury <script src="static/js/jquery-3.4.1.js"></script> 前端表单 <form id="form-avatar" enctype="multipart/form-data"> <p>请选择要上传的文件:</p&

  • ajaxFileupload实现多文件上传功能

    打开google 搜索"ajaxFileupload' '多文件上传"可以搜到许许多多类似的,那我为什么还要写一下呢? 一个是对之前大神的贡献表示感谢:二个是自己知识的总结:三个是自己在原有的基础上改动了下,在此记录,可能帮助其他朋友. 用过这个插件的都知道这个插件的基本用法,我就不废话,直接上代码. 我需要实现多个文件上传,之前的做法是定义多个不同id的input,然后把ajaxfileuplod方法放在for循环里,这个方法是在网上看到的,我觉得不怎么好,后面在网上找到的,就高级点

  • Ajax实现上传图像功能的示例详解

    Ajax实现上传图像功能的示例详解

    最终效果展示 xhr发起请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt

  • Ajax配合Spring实现文件上传功能代码

    由于项目需要,开发一个可以上传图片到服务器的web表单页面. 一. 需求 Web表单页面,可以通过表单上传图片以及其他文字信息. 二. 图片上传的流程 之前没有做过这类页面,通过查询资料.发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下,服务器向前台返回图片的存储路径:之后,前台将图片存储路径以及其他表单信息一起提交到服务器,所有的表单信息存储在数据库中. 三. 方法 由于项目需要,我这里介绍两种图片上传方法,第一种是使用ajax对一个图片直接上传:第二种是先在前台将图片切割为较小的

  • 基于Ajaxupload的多文件上传操作

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="php"><?php $ele = $_GET['ele']; $file = $_FILES['thumb_'.$ele]; $pathinfo = pathinfo($file['name']); $filedir = 'uploads/' . date('Y'); if (!is_dir($filedir)) { mkdir($filedir

  • AJAX实现文件上传功能报错Current request is not a multipart request详解

    AJAX实现文件上传功能报错Current request is not a multipart request详解

    想做一个文件上传,spring boot配合Ajax来进行.却报错:Current request is not a multipart request 这是错误截图: 当时发生这种错误,我是很震惊的,我以为找了很多办法来解决. 有以下办法,当然这些并未解决我的问题,但是部分有用,就先列举出来: 1.在页面头部加入信息: <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8

  • jquery ajax实现文件上传功能实例代码

    下面看下ajax实现文件上传   没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></

  • 利用laravel+ajax实现文件上传功能方法示例

    前言 大家都知道,早期的XMLHttpRequest不支持文件上传,一般用第三方js插件或者flash,现在可以借助XMLHttpRequest Level 2 的FormData对象实现二进制文件上传,正好最近工作中遇到了这个需求,所以本文就来给大家总结下实现的方法,话不多说了,来一起看看详细的介绍吧. 示例代码 @extends('layouts.art') @section('content') <form class="form-horizontal" id="

  • DOM解析XML报错Content is not allowed in prolog解决方案详解

    报错内容为: Content is not allowed in prolog. Nested exception: Content is not allowed in prolog 网上所述总结来说就是解析内容内包含BOM.这个标记是看不到的,流里面有这个标记而已. BOM:Byte Order Mark,中文名字节顺序标记.UCS规范建议在传输字节流前,先传输BOM来判断字节顺序. 其实UTF-8是不需要用BOM来表明字节顺序的,但是可以 用BOM来表明编码方式.BOM的UTF-8编码是EF

  • jQuery+ajax实现文件上传功能

    jQuery+ajax实现文件上传功能

    jQuery+ajax实现文件上传功能(显示文件上传进度),供大家参考,具体内容如下 具体实现步骤 1.定义UI结构,引入bootstrap的CSS文件和jQuery文件 2.给上传按钮绑定点击事件 3.验证是否选择了文件 4.向FormData中追加文件 5.使用ajax发起上传文件的请求 6.设置文件的路径 7.使用xhr获得文件上传的进度 8.当文件上传完成让进度条显示绿色 <style> #loading { width: 20px; height: 20px; } #img { di

  • php+ajax实现图片文件上传功能实例

    目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.g

  • springboot+thymeleaf 文件上传功能的实现代码

    pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifa

  • vue3+koa实现文件上传功能的全过程记录

    目录 前言: 技术引用: 前端实现 后台实现: 引入koa-body,并注册中间件: 引入koa-static 进行静态资源访问 前台回显图片: 遇到的问题: 已解决: Token验证问题: proxy代理问题: 总结: 前言: 在完成自己的毕设中,需要引入文件上传,前后找到资料实现了图片上传,在此做一个总结 技术引用: 1. 使用了 koa-body 实现后台文件上传功能 2. 使用了 koa-static 实现后台资源静态访问 3. 使用了 Element plus UI的upload组件实

  • 使用php完成常见的文件上传功能(推荐)

    使用php完成常见的文件上传功能(推荐)

    文件上传现在都是很常见的了,可以上传文件,上传头像等,不同的浏览器"文件上传"有不同的效果 先看下火狐浏览器的效果是这样的: 再看下IE浏览器是这样的: 还有很多其他的浏览器,就不一一的查看效果了,那么这个上传是怎么实现的呢? 一.文件上传功能 (1)第一是要有这个上传页面了 首先是要写表单元素了(其中就有处理页面"关于上传的处理了,其中有些规则可以写",还有传输方式,再就是一个重要的属性,因为是文件上传,所以要有这个属性:enctype="multipa

随机推荐