Java Web实现文件上传(相机、相册)

一只造梦者

已于 2022-07-08 00:05:14 修改

阅读量430

点赞数

分类专栏： Java Web 文章标签：前端 java javascript

于 2022-07-08 00:01:56 首次发布

本文链接：https://blog.csdn.net/xianren1hao/article/details/125669214

版权

H5页面中通过JQuery的方式实现相机、相册、拍摄视频三种方式的文件上传，Java后端通过Servlet的方式来接收上传的文件并写入的服务端存储目录中。

前端HTML文件：

<div class="log" style="text-align: center;float: left;width: 65px;margin: 20px 5px 0px 30px;font-size: 13px;color: #333;" >
	<a id="postfile_camera" style="" class="file">
		<img src="img/img_cam.png" style="width: 65px;cursor: pointer;" for="file_camera" >
		<input type="file" name="file_camera" id="file_camera"  accept="image/*" capture="camera" style="opacity: 0;height: 85px;width: 65px;position: absolute;z-index: 11;top: 20px;left: 30px;">
		<span class="log_text" >拍照</span>
	</a>
</div>
<div class="log" style="text-align: center;float: left;width: 65px;margin: 20px 5px 0px 30px;font-size: 13px;color: #333;" >
	<a id="postfile_video" style="" class="file">
		<img src="img/video.png" style="width: 65px;cursor: pointer;" for="file_video" >
		<input type="file" name="file_video" id="file_video"  accept="video/*" capture="camcorder" style="opacity: 0;height: 85px;width: 65px;position: absolute;z-index: 11;top: 20px;left: 130px;">
		<span class="log_text" >录像</span>
	</a>
</div>
<div class="log" style="text-align: center;float: left;width: 65px;margin: 20px 5px 0px 30px;font-size: 13px;color: #333;" >
	<a id="postfile_" style="" class="file">
		<img src="img/img_pic.png" style="width: 65px;cursor: pointer;" for="file_pic">
		<input type="file" name="file_pic" id="file_pic" accept="image/*" style="opacity: 0;height: 85px;width: 65px;position: absolute;z-index: 11;top: 20px;left: 230px;">
		<span class="log_text" >相册</span  >
	</a>
</div>

前端JS文件，通过Ajax方式提交文件：

var send_file_num = 0；

//相机拍照上传
$('#file_camera').localResizeIMG({
   
	width: 800,
	quality: 1,
	success: function (result) {
   
		send_file_num ++;
		var num = send_file_num;
		sendImgFile(result, num);
		
		console.log(result);
	},
	before: function(thisObj, blob, file){
   
		console.log