ajax前后端分离上传图片

最新推荐文章于 2024-04-07 17:20:06 发布

13号同学

最新推荐文章于 2024-04-07 17:20:06 发布

阅读量708

点赞数 1

文章标签： java jsp jquery ajax

本文链接：https://blog.csdn.net/weixin_45758314/article/details/103739979

版权

在尝试使用Ajax上传图片时遇到浏览器报错，原因是试图将文件作为JSON字符串上传导致。解决方法是利用FormData对象来提交文件数据。通过创建FormData实例，将文件添加到其中，并使用Ajax发送FormData对象。后台成功接收到文件名，表明文件上传已正常执行。

摘要由CSDN通过智能技术生成

今天使用ajax做图片上传的时候执行上传的时候浏览器出现500报错，立即打开浏览器看错误信息
在这里插入图片描述
发现Content-Type: application/json也就是说我传的是一个json字符串，但是我上传的是一个文件啊，所以报错了。
当时使用ajax上传文件的时候使用的是$("#dd").serialize(),对 form 表单进行序列化来提交表单数据。网上找原因是因为上传文件的文件流是无法被序列化并传递的，所以$("#dd").serialize(),就没有用了，那就使用FormData 来代替

使用 FormData 进行 Ajax 请求并上传文件

<body>
    <input type="file" id="nfile" />
    <input id="btn" type="button" value="提交" />
</body>
<script type="text/javascript"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

13号同学

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Spring Boot + Ajax前后端分离实现三级联动

wanghuichen的博客

12-26

1305

Spring Boot + Ajax前后端分离实现三级联动，前后端分离项目~

图片上传下载ajax异步操作前后台代码-demo

08-02

解压即用，js文件包含ajax图片文件上传，手机号码，身份证等必要常用效验方法，后台图片压缩处理。文件上传等，可自行改造方便好用。ssm，ssh框架下都测试过完全ok。

参与评论您还未登录，请先登录后发表或查看评论

前后端分离实现图片上传的功能

qq_43804570的博客

07-07

1697

由于最近开发的项目需要有上传图片的功能，并且能够让上传的图片能够在网页上预览出来。所以写下此篇文章，记录一下学习到的知识。 1，前端前端项目是采用angularjs框架搭建的。图片上传功能在前端的代码分布在两个部分，一部分是图片上传页面的表单代码，一部分是在对应的controller中的代码。下面对这两方面代码进行展示。 (1)页面代码 <form class="form-horizontal" role="form" id="editForm"

前后端分离项目中图片的上传和获取

最新发布

jiede8624的博客

04-07

2167

前端使用VS code作为代码编辑器，技术栈涉及vue、axios和element-plus，后端使用IDEA作为代码编辑器，技术栈涉及springMVC、spring、mybatis。在上述图片中，点击“上传头像”选择一张图片，将其保存到浏览器的内存中，点击“保存”按钮，将其发送到后端进行保存，并将图片的地址写入数据库。

前后端服务器分离时，前端如何上传图片到前端服务器？

湖北太米网络科技有限公司

03-06

1378

2. 使用第三方存储服务：前端可以将图片上传到一些第三方的存储服务，如云存储服务（如七牛云、阿里云OSS、腾讯云COS等）或者文件上传服务（如Cloudinary）。前端上传图片后，可以获取到该图片在第三方存储服务上的URL，并将该URL发送给后端服务器，后端服务器可以使用该URL访问图片。3. 通过后端服务器代理上传：前端将图片发送给后端服务器，后端服务器接收到图片后，将其暂存，并分配一个访问URL返回给前端。前端服务器可以使用后端提供的API接口处理上传请求，然后将图片保存到前端服务器的文件系统中。

实现异步上传图片【前后端分离】

小柚的博客

08-24

520

/ 上传成功后，图片地址放入产品表单的隐藏域中。// 上传成功后，图片回显到pImage上。

前后端分离实现上传图片的功能

高等游民の博客

01-09

3334

前后端分离实现上传图片的功能思路前端上传图片和分类名称，保存图片文件，将数据追加到formData传给后端，回调清空。后端对图片和分类名分开进行处理。分类名进行普通的增加。图片需要借助工具类转化成统一格式，再构造出“id+.jpg”的格式上传到文件夹中。前端 <div class="panel panel-warning addDiv"> ...

SpringBoot+Vue.js实现前后端分离的文件上传功能

10-18

本文将详细介绍如何使用SpringBoot和Vue.js实现一个前后端分离的文件上传功能。首先，要实现前后端分离的文件上传功能，需要具备Vue.js和SpringBoot的相关知识。这个实现可以分为两个独立的项目：一个是前端项目，...

springboot+vue前后端分离实现超大文件分块上传

10-22

本示例项目"springboot+vue前后端分离实现超大文件分块上传"提供了一个高效且实用的解决方案，将Java后端框架Spring Boot与前端Vue.js及Element UI组件库结合，实现了大文件的分块上传功能。下面我们将详细探讨这个...

web技术实现图片上传到后台

01-17

jsp+servlet+java实现图片上传到后台，内有sql文件和注释

前后端分离实践

08-22

前后端分离，很不错的私人制作pdf文档

部署vue+Springboot前后端分离项目的步骤实现

10-15

在现代Web开发中，前后端分离是一种常见的架构模式，它允许前端和后端开发人员专注于各自领域的任务，提高开发效率和代码质量。Vue.js 是一款轻量级的前端JavaScript框架，常用于构建单页应用（SPA），而SpringBoot...

ajax实现前后端传输流文件（图片）

sweety_teng的博客

01-13

1551

ajax实现前后端传输流文件（图片）在参考了一众CSDN大神的帖子之后终于实现了从后端获取图片并正确显示在canvas中，下面是代码 var xmlhttp; xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","自己的函数地址",true); xmlhttp.responseType = "blob"; xmlhttp.onload = function(){ console.log(this);

前后端分离之图片上传服务端处理方法

CHL_CAT的博客

09-27

1万+

最近公司做的项目基本上都是用的前后端分离的架构进行的。在图片上传这块处理是先将图片上传到开发者服务器上，然后返回该图片在服务器上的图片地址存到数据库中。存到数据库的时候存的并不是网络地址，而是图片的相对路径，显示的时候再替换成服务器上的图片。刚开始不明白为何这么存，后来请教了公司的项目经理，项目经理说这样做，分布式部署的时候比较好。服务端上传图片接口是基于rest形式的，代码如下： @Pat

前后端分离ajax接收文件流的实践

leason的博客

10-29

2万+

一般ajax，post请求不能实现的原因开始的想法：在页面上用jQuery的$.post方法发送一个请求给服务器，然后服务器根据这个参数再生成相应的一个文件流返回给客户端。但是，在$.post方法的回调函数中，只能处理xml, json, script, or html类型，对返回的文件流却没办法弹出对话框让用户下载了。另类实现方法经过百度，看到了很多人采用隐藏form提交

表单和ajax中的post请求&&后台获取数据方法（深度好文）