JavaScript发送图片到服务端

最新推荐文章于 2022-12-06 14:27:35 发布

littleshimmer

最新推荐文章于 2022-12-06 14:27:35 发布

阅读量1.9k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_43521551/article/details/106747220

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript发送图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script src="js/base.js"></script>
		<script src="js/jquery-3.5.0.min.js"></script>
	</head>
	<body>
		<script> 
				var img="";
		        function selectImg(source) { 
		            var file = source.files[0]; 
		            if(window.FileReader) { 
		                var fr = new FileReader(); 
		                fr.onloadend = function(e) { 
							// 通过img属性src设置显示区
		                    document.getElementById("imgview").src = e.target.result; 
							// img 作为传输到服务器的参数
							img = e.target.result;
						}; 
						// 该方法将文件读取为一段以 data: 开头的字符串，
						// 这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案
						// 通过fr用于把图片显示出来
		                fr.readAsDataURL(file); 
		            } 
		        } 
				function sendImg(){
					// obj也必须是json对象
					obj = {};
					obj.image = img;
					//确保已经导入了该文件：jquery-3.5.0.min.js-->
					$.ajax({
						url: "http://127.0.0.1:8080/EquipManage/uploadimg",
						data:obj,
						// 传递的是图片文件，这里不能用GET方法
						type: "POST",
						dataType: "json",
						xhrFields: {
						    withCredentials: true
						},
						crossDomain: true,
						success: function(data) {
							alert(JSON.stringify(data));
						},
						error:function(msg){
							// msg为json对象
							document.write(JSON.stringify(msg));
						},
					});
				}
				
		    </script> 
		<!-- accept="image/x-png,image/gif,image/jpeg,image/bmp,image/jpg" -->
		<!-- *表示上传类型为图片 -->
		<div>
			<input type="file" name="file" accept="image/*" onchange="selectImg(this)" /> 
		</div>
		<div>
		<img id="imgview" src="" alt="尚无图片" width="480" height="320"> 
		</div>
		<input type="button" onclick="sendImg()" value="上传到服务器"/>
	</body>
</html>

服务端接收图片

package emp;

import java.io.FileOutputStream;
import java.io.IOException;

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


import sun.misc.BASE64Decoder;


/**
 * @author wonzeng
 * 处理前端发送过来的图片
 *
 */
@WebServlet("/uploadimg")
public class UploadImageAjax extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override

	protected void doPost(HttpServletRequest req, HttpServletResponse response)

			throws ServletException, IOException {

		String image = req.getParameter("image");
		System.out.println("UploadImageAjax.doPost():"+image);

// 		文件头部信息形式
//		String header = "data:image/jpeg;base64,";
		
		String header = "data:image/";
//		找不到以字符串 header，说明不是图片
		if (!image.startsWith(header)) {
			response.getWriter().write("\"failure\"");

		}
		int pos = image.indexOf(";");
		String imgtype = image.substring(header.length(),pos);
		System.out.println("图片类型："+imgtype);
// 		去掉头部
		image = image.substring(image.indexOf(",")+1);
		System.out.println("去除头部："+image);
		BASE64Decoder decoder = new BASE64Decoder();
		try {
			// 对字节数组字符串进行Base64解码并生成图片
			byte[] decodedBytes = decoder.decodeBuffer(image);
//			设置图片保存路径
			String imgFilePath = "C:\\Users\\Lenovo\\Desktop\\temp_img."+imgtype;
			FileOutputStream out = new FileOutputStream(imgFilePath);
//			把图片写入文件
			out.write(decodedBytes);
			out.close();

		} catch (Exception e) {
			System.out.println("发生异常");
//			返回json类型
			response.getWriter().write("\"failure\"");
//			e.printStackTrace();
		}
		response.getWriter().write("\"success\"");
	}
}

littleshimmer

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript发送图片到服务端

JavaScript发送图片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css" /> <script src="js/base.js"></script> <script
复制链接

扫一扫

专栏目录