当前位置:首页 » 图片知识 » 后端如何接收前端发送的图片
扩展阅读
女生和渣男搞笑图片 2023-08-31 22:07:09
嘻嘻长什么样图片 2023-08-31 22:06:10

后端如何接收前端发送的图片

发布时间: 2023-05-24 12:47:20

① 前端使用form表单提交图片后,java后台怎么获取该图片

上传图片 后台获取的时候直接从数据库拿路径
下面这是servlet的内容:
package demo;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class DemoServlet extends HttpServlet {

private static final String UPLOAD_DIRECTORY = "upload";
private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB
private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB
private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
DiskFileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload sfu=new ServletFileUpload(factory);
sfu.setHeaderEncoding("UTF-8");
sfu.setProgressListener(new ProgressListener() {

public void update(long pBytesRead, long pContentLength, int pItems) {
System.out.println("文件大小为:"+pContentLength+",当前已处理:"+pBytesRead);

}
});
//判断提交上来的数据是否是上传表单的数据
if(!ServletFileUpload.isMultipartContent(request)){
PrintWriter writer= response.getWriter();
writer.println("Error:表单必须包含 enctype=multipart/form-data");
writer.flush();
return;
}
factory.setSizeThreshold(MEMORY_THRESHOLD);
//设置临时储存目录
factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
//设置最大文件上传值
sfu.setFileSizeMax(MAX_FILE_SIZE);
//设置最大请求值(包含文件和表单数据)
sfu.setSizeMax(MAX_REQUEST_SIZE);
String uploadpath=getServletContext().getRealPath("./")+ File.separator+UPLOAD_DIRECTORY;
File file=new File(uploadpath);
if(!file.exists()){
file.mkdir();
}

try {
List<FileItem> formItems = sfu.parseRequest(request);
if(formItems!=null&&formItems.size()>0){
for(FileItem item:formItems){
if(!item.isFormField()){
String fileName=new File(item.getName()).getName();
String filePath=uploadpath+File.separator+fileName;
File storeFile=new File(filePath);
System.out.println(filePath);
item.write(storeFile);
request.setAttribute("message", "文件上传成功!");
}
}
}
} catch (Exception e) {
request.setAttribute("message", "错误信息:"+e.getMessage());
}
getServletContext().getRequestDispatcher("/demo.jsp").forward(request, response);
}

}

下面是jsp的内容,jsp放到webapp下,如果想放到WEB-INF下就把servlet里转发的路径改一下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="demo.do" enctype="multipart/form-data" method="post">
<input type="file" name="file1" />
<%
String message = (String) request.getAttribute("message");
%>
<%=message%>
<input type="submit" value="提交"/>
</form>
</body>
</html>

② html如何接收java后台传递来的字符串或者json串,我有后台的图片,请看看图片帮忙写一个html前台。谢谢!

你可能有点搞混了。
你的dataType:html,的话是无法接收后台传的json串的。
由于你后台return "wanglongtest.html",所以前台ajax接州友收是一个
html对象,则前台可以按如下代码处理:
success: function(rs){
$("#testDiv").html(rs);
}

html:
<!-- ajax 要填充的内容 -->
<div id="testDiv">

</div>
------------------------------------
如果你想接收后台册纯槐的类型为json,那么后台servlet方法中只需要return null;
完整代码见如下:
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");

//设置响应格式和字符集(与前端页面一致,否则会有乱码问题)
response.setContentType("text/html;charset=GBK");
PrintWriter out = response.getWriter();
Map model = new HashMap();
model.put("zhangsan",true);
JSONObject json = new JSONObject(model); //将一个map对象实例化成一个json对象
out.write(json.toString());
out.flush();
out.close();

return null;
前台js:
$.ajax({
type: "POST",
url: "请求地址",
dataType: "json", //指定裤闷请求的数据类型
data:"type=1", //传到后台的参数,后台可以通过request.getParameter("type")获取
success:function(rs){
alert(rs.zhangsan); //我这里以弹出框的方式显示zhangsan对应的value
//也可以为html中的标签赋值
$("#testAjax").val(rs.zhangsan);
}
},"json")
});

html:
<input id="testAjax" type="text" value="" />

其实楼上的同学们已经大概说清了如何处理,我这里只是帮你进一步理清dataType:html和dataType:json的具体处理方式,如有疑问可留言。

③ 后端传送图片到前端

这种方式前端饥铅图片的src将会是一大串编码(即data:image/jpeg;base64,加上图片的base64编罩肢吵物侍码)

④ 流行的前后端交互是如何实现的

比较流行MVVM,越来越多的公司开始采用前后端分离的开发粗岩含模式。在前后端不分离的时代,比如ASP、JSP、PHP等开发模式,前端就是负责切图和编写静态页面模板,然后后端将数据渲染到前端提供的静态页面模板中,最后将页面渲染到浏览器就岩笑完成整个前后端交互过程。

状态响应码

用特定的数字表示一些意思。

1XX : 服务器已经成功接收到你的数据,正在处理,可以继续提交其数据。

2XX : 服务端成功响应(200请求)。

3XX : 重定向。

4XX : 请求错误(404 请枣判求资源不存在 403 拒绝访问)。

5XX : 服务器内部错误(500)。

⑤ 前端上传文件的几种方法

第一种:经典的form和input上传。

设置form的aciton为后端页面,enctype="multipart/form-data",type=‘post’

<formaction='http://www.ty2y.com/'enctype="multipart/form-data"type='post'><inputtype='file'><inputtype='hidden'name='userid'><inputtype='hidden'name='signature'><button>提交</button></form>

使用input选择文件,设置好其他input的值,点击提交,将文件数据及签名等认证信息发送到form设置的action对应的页面,浏览器也会跳转到该页面。触发form表单提交数据的方式有2种,一种是在页面上点击button按钮或<input
type='submit'>按钮触发,第二种是在js中执行form.submit()方法。

优点:使用简单方便,兼容性好,基本所有浏览器都支持。

缺点:1. 提交数据后页面会跳转(下面会讲如何禁止页面跳转)。

2.因为是浏览器发起的请求,不是一个ajax,所以前端无法知道什么时候上传结束。

3. form表单里发送除文件外的数据,一般是新建一个type=hidden的input,value=‘需要传的数据’,每发送一个数据就需要一个input,一旦多了就会使得dom看起来比较冗余。

小技巧:

form表单提交数据后会自动跳转到action指定的页面,为了禁止页面跳转,可以在页面中新建一个空的ifame,比如name='upload',然后设置form的target="Uploader",form有一个target的属性,规定在何处打开action,这样form提交数据后就会仍停留在当前页。代码如下:

<formaction='http://www.jshaman.com/'enctype="multipart/form-data"type='post'target="uploader1"><inputtype='file'><button>提交</button></form><ifrmaename='upload'id='uploader1'></iframe>

这样写的另一个好处是,可以知道什么时候上传完成并接收到后端的回调结果。比如上面这个例子,文件数据发送到了
'uploadFile.php',假设该页面处理完数据后返回了一个地址,该地址会被写入到之前的iframe中。所以在ifame的onload函数触发时,也就是上传完成后,可以在iframe中读取到后端返回的数据。

variframe=document.getElementById('upload1');
iframe.onload=function(){
vardoc=window.frames['uploader1'].document;varpre=doc.getElementsByTagName('pre');varobj=JSON.parse(pre[0].innerHTML);
}

使用这种方法时需要注意,iframe有跨域限制,创建出来的iframe的地址如果和当前页面地址不同源,会报错。这种情况下,建议大家在iframe的onload函数中,再次向后端请求一个接口获取文件地址,而不是直接去iframe里读取。或者返回这样的数据。

<scripttype="text/javascript">window.top.window[callback](data)</script>


callback是和前端约定好的名字,上传完成后触发该函数并返回后端数据。

第二种:使用formData上传。

用js构造form表单的数据,简单高效,但最低只兼容IE10,所以需要兼容IE9的童鞋们就略过这个方法吧。

html:

<inputtype='file'>

js:

varformData=newFormData();
formData.append("userid",userid);
formData.append("signature",signature);
formData.append("file",file);//file是blob数据//再用ajax发送formData到服务器即可,

注意一定要是post方式上传

说明:第一种方法提到了创建多个type=‘hidden’的input来发送签名数据,这儿可以用formData.append方法来代替该操作,避免了dom中有多个input的情况出现。最后将file数据也append到formData发送到服务器即可完成上传。

优点:由于这种方式是ajax上传,可以准确知道什么时候上传完成,也可以方便地接收到回调数据。

缺点:兼容性差

第三种:使用fileReader读取文件数据进行上传。

HTML5的新api,兼容性也不是特别好,只兼容到了IE10。

varfr=newFileReader();
fr.readAsDataURL(file);
fr.onload=function(event){vardata=event.target.result;//此处获得的data是base64格式的数据img.src=data;
ajax(url,{data},function(){})
}

上面获得的data可以用来实现图片上传前的本地预览,也可以用来发送base64数据给后端然后返回该数据块对应的地址。

优点:同第二种

缺点:一次性发送大量的base64数据会导致浏览器卡顿,服务器端接收这样的数据可能也会出现问题。

⑥ 关于图片和文字一起上传java如何接收的问题

Base64编码啊 之后在用一个符号做分割比如 {'sign':'图片编码后|大文本字符串'},后台拿到String[] test = sign.split("|"),就可以了!

⑦ 前端图片上传给后端还需要给后端字段吗

【聚焦前端实战】后端让我把图片文件和字段一起上传了...
2022年11月21日但是如果要把字段和图片文件一起上传那就不支持了,当然也不能像普通的字段上传一样使用JSON,这个时候就要掏出我们的FormData格式了!
CSDN编程社区

大家还在搜
js将文件转为二进制流

vue选择文件夹获取绝对路径

后端响应图片url给前端

前端上传文件到服务器

formdata和json区别

vue上传图片到后端

前端将二进制流转换成图片

通过url访问服务器上的图片

前端怎么把图片传到后端

前端上传图片到数据库

前端适配移动端

js文件转二进制

vue3上传图片

前端图片上传后端服务器

前端传图片给后端
java后端如何传图片给前端

前端上传图片到后端vue

django返回亮滑图片给前端

java后端接收前端传来的图片

js给一个对象添加属性

js引入图片

网页堆栈溢出怎么解决

前端上传图片到后端

前端把图片传给后端

图片上传服务器并返回url

前端浏览器适配方案

前端上传图片到后端优化

前后端图片传输

url统一资源定位符

前端上传旁卖图片
前端如何上传图片在返给后端 - 糖是苦滴的博客 - CSDN博客
2022年8月9日on-success:后面跟一个方法,通过这个方法我们可以获取到后端返还给我们的url,这个时候我们需要把url通过表单提交给后端,这个时候上传就成功完成了。
CSDN编程社区

前端如何将图片传到后端原生js(nodejs后端保存代码请...
2022年6月21日后端将照片重新命名,就保存到了后端,不需要再传递照片名,后端接收到req.files上面有这个图片原来的名字。
CSDN编程社区

前端上传图片到后端服务器 - RainCat - zZ的博客 - CSDN博客

2021年9月4日JAVA后端 ---这里可以使用MultipartFile直接接收文件信息,也可以使用HttpServletRequest先接收 -...
CSDN编程社区

大家还在搜

前端向后端传输数据的方法有哪些
js给一个对象添加属性
前端图片API
前端上传图片的逻辑
前端上传图片的时机
前后端图片传输
前端上传图片到数据库
前端适配移动端
前端图片上传给后端还需要给后端字段吗 - 资深答主答疑 - 网络问一问

在线
2240位电子数码答主在线答
已服务超1.5亿人5分钟内回复
Hi,为您实时解答电子数码类软硬件等问题,与数码行家、发烧友1对1在线沟通
前端图片上传给后端还需要给后端字段吗
马上提问


vue显示后端传来的图片
116人正在咨询

前端上传图片到服务器
117人正在咨询

做前端好还是后端好
121人正在咨询

vue显示后端传来的图片
116人正在咨询
网络问一问

关于图片上传的问题(后端+前端) - 龙小超的博客 - CSDN博客 - 后端...
2022年10月28日这个方法可以让你接受到从前端接受到的图片,为post传值 前端部分(使用了element-ui的图片上传) <el-image :src="'http://localhost:3000/...
CSDN编程社区

图片上传流程&前端上传文件&后端保存文件&并返回图片...
2022年7月26日比如在用户界运键逗面,用户选择本地的一张照片,前端把照片传到后端,后端怎么把照片保存到服务器,然后返回...

CSDN编程社区

...思路总结 - 琹箐的博客 - CSDN博客 - 前端上传图片到后端
2022年4月28日注:此处只提供前端向后端传图片思路的大致框架,不能正常运行。转图片的代码未提供,还需整理。 <template> <!--
CSDN编程社区

前端上传图片到后端 - 小饼干 - mum的博客 - CSDN博客 - 前段上传j...
2017年7月25日方法一、前端通过控件传给后端的是经过base64编码的字符串,后端拿到这个字符串后再经过base64解码,把解码后的图片存到服务器的某个位置,然后数...
CSDN编程社区

大家还在搜

前端将图片放在后端
前端把图片传给后端
图片上传前端链接
如何传图片给后端
前端浏览器适配方案
js文件转二进制
图片前后端怎么传输
图片上传服务器并返回url
vue前端上传文件给后端的两种方式 - 觉非逸的博客 - CSDN博客 - v...
2022年5月27日multiple="true" :before-upload="beforeUpload" :customRequest="selfUpload" accept=".png,.jpg" > 上传图片 1 2 3 4 5 6 7 ...
CSDN编程社区

前端上传图片(文件)到后端 - 观棋不语的我的博客 - CSDN博客...
2019年11月23日然后取出文件数组的第一个文件就是你想要上传的文件了, 将其赋值到Vue结构里面, 函数就可以拿来用了。 update:function(){if(!checkEmpty(thi...
CSDN编程社区

前端提交对象给后端:不使用前端技术也可以 - 知乎

2020年12月14日1:前端提交字段数据(可以是from,也可以是get请求,只要能将字段数据发送到后端即可)。
知乎

...彩虹下的布迷的博客 - CSDN博客 - 前端上传图片到后端vue
2022年6月7日前端传图片给后端的方式,是通过bsae64传输,然后后端把接收到的转化为字节流在把图片展示出来 后端传前端直接传输了字节流 Base64是网络上最常...
CSDN编程社区

vue+elementui:前端文件上传与后端文 - 唐代王维写代码...
2022年8月12日vue前端上传文件给后端的两种方式 7303阅读·0评论·0点赞2022年5月27日 使用element-ui中的Upload 上传向后端传输图片 184阅读·0评论·0点...
CSDN编程社区

大家还在搜

前端向后端传输数据的方法有哪些
java后端怎么写接口给前端
web前端开发环境配置
gitee不配置公钥可以上传吗
后端传递图片至前端
vue上传图片的代码
后端怎么给前端图片
前后端获取图片
【前端上传文件,后端保存】 - sgmwgntw的博客 - CSDN博客 - 前端...
2022年8月25日一、前端的要求 1.采用post方式提交数据 2.采用multipart格式上传文件 3.使用input的file控制上传 例: <inputname="myFile"type="file"/> ...
CSDN编程社区

js前端上传图片识一张一张上传要合成一个整体字符串传给...

2022年2月10日js前端上传图片整合一个字符串拼接传给后端 上传了之后是这样的 原始的: 解决方案: 1、...
博客园

前端将文件/图片传给后端 - 灰信网(软件开发博客聚合)
前端将文件/图片传给后端,灰信网,软件开发博客聚合,程序员专属的优秀博客文章阅读平台。
www.freesion.com

【Web前端问题】前端上传图片该如何传数据给后端,如果...
2021年4月30日除了uploadFiles外还要传递图片key等数据给后端,用上述input选择图片后,传递数据会把图片路径还是图片...
www.h5w3.com

大家还在搜

如何传图片给后端
前端传输图片到后端
前端传文件给后端
图片前后端怎么传输
Java实现文件上传
图片是传到后端还是前端
前端如何传图片给后端
vue3实现图片上传
...图片并上传,前端一步到位,无需用到后端 - 子慕大诗人...
2015年8月24日本质还是需要先上传到后台,最后还是后端剪裁,和之前的方式一样,只是用了canvas而已。 自己实现前端剪裁一步到位: 后来我就想了想canvas能存储ba...
博客园

前端怎么传图片给后台(java)? - 网络知道
2个回答回答时间:2018年2月23日
最佳回答:你可以现在前台控制台打印一下base64的流,看看是否获取图片成功。如果成功再去后台看看获取的文件信息,haerd中是否有数据。然后就...

⑧ 如何将前端网页与后台数据库连接

1、您需要掌握的第一件事是数据库查询语句。这是最简单的数据库查询语句:SELECT * FROM sys_role,这意味着从角色表中查询所有信息。以下显示了查询结果。此结果需要显示在首页上。需要代码来调用这个sql语句。

⑨ 前端批量上传图片后端怎么接收

你可以现在前台控制台打印一下base64的流,看看是否获取图片成功。如果成功再去后台看看获取的文件信息,haerd中是否有数据。 然后就是你没有后台代码,这里也不好判断是否是接收问题

⑩ java后台怎么收到前端传过来的二维数组

struts2的扰尘话直接在action中声明为String[][] roles就好。

其他情况,可以通过遍历request.getParameterMap()对象缓信禅,根据name自己组装坦乎一个roles的二维数组。