當前位置:首頁 » 圖片知識 » 後端如何接收前端發送的圖片
擴展閱讀
女生和渣男搞笑圖片 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的二維數組。