精!HTML5调用手机拍照实现图片上传服务器,并将图片地址存进数据库(上)

这篇文章主要为大家详细介绍了HTML5+Canvas+jquery技术,调用手机拍照功能实现图片上传。

不懂原理的新手,可以先学习:超清晰!HTML5 实现手机拍照上传功能原理讲解

精!HTML5调用手机拍照实现图片上传服务器,并将图片地址存进数据库(上)

上传页面用到了HTML5的file文件上传功能,再配合canvas。

<html>

	<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<meta name="format-detection" content="telephone=yes">

	<head>
		<meta charset="UTF-8">

		<title>上传证件</title>

		<style>
			body {

				margin: 20px 20%;

				color: #777;

				text-align: center;
			}

			#result {
				margin-top: 20px;
			}
		</style>
	</head>
	<body>

		<h1 class="text-center">上传证件...</h1>

		<hr />

		<input type="file" />

		<p id="result" align="center"></p>

		<hr />

		<!-- 引入jQuery -->

		<script type="text/javascript" src="../js/jQuery/jquery-1.9.1.min.js"></script>

		<script type="text/javascript" src="../js/LocalResizeIMG.js"></script>


		<!-- mobileBUGFix.js 兼容修复移动设备 -->

		<script src="../js/mobileBUGFix.mini.js" type="text/javascript"></script>

		<script type="text/javascript">
			$("input:file").localResizeIMG({

				width: 500,

				quality: 0.8,

				success: function(result) {

					var img = new Image();

					img.src = result.base64;

					console.log(result.clearBase64);

					//$("body").append(img); 

					$("#result").empty();

					$("#result").append(img); //呈现图像(拍照結果) 

					$.ajax({

						url: "upLoadImageServlet",

						type: "POST",

						data: {
							formFile: result.clearBase64
						},

						dataType: "HTML",

						timeout: 1000,

						error: function() {

							alert("Error loading PHP document");

						},

						success: function(result) {

							//alert(result); 

							//console.log(result); 

							alert("Uploads success~")

						}

					});

				}

			});
		</script>

	</body>

</html>

实现流程

首先在前端把图片进行压缩,因为手机的不同,可能有的手机拍照给力,像素高,拍出来的图片的大小就相对大一些,所以这里通过一个插件进行了压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在Java或者PHP后台进行Base64解码,解出来的路径即为上传图片的路径地址,然后再进行存储,写到文件或者数据库里面。

精!HTML5调用手机拍照实现图片上传服务器,并将图片地址存进数据库(上)

下一篇会讲到在Java后台进行图片上传操作。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10951.html

(0)
江山如画的头像江山如画管理团队
上一篇 2022年8月11日 上午9:31
下一篇 2022年8月11日 上午9:55

99%的人还看了以下文章

  • 别再浪费时间了!分享一个学习Python的正确指南!

    Python是一门新手友好、功能强大、高效灵活的编程语言。 然而很多同学在学习过程中,并没有找到正确的方式,这样不仅浪费了大量的时间与精力,也对学习的兴趣有一定打击。 125网页设计整理了一些初学者学习的几大误区分享给大家,帮助同学们更好地学习Python。 急于求成 很多对学习Python有兴趣的同学们,可能在刚开始学习时没有找准学习方式。大家只是一味地买…

    2022年8月13日
    1.3K0
  • 精!如何在IDEA中导入myeclipse项目、配置并运行(实例演示)

    125建站网站长原来开发的myeclipse项目直接在IDEA打开发现会有很多问题,根据解决过程,写出此文章供大家参考! 1.首先打开IDEA工具,选择导入项目,然后在弹出的窗口中选择要打开的myeclipse文件,然后点击确定。如图所示 2.选择Eclipse,然后一直下一步 3.正常我们SDK这里都配置好了,直接选择就好,然后完成项目的导入 4.导入的完…

    2023年2月3日 编程开发
    4.1K0
  • Python数据分析入门实战一:统计分析用户学习数据

    Python数据分析要求: 使用 Python 基础知识分析用户学习数据 json 文件,并从文件中统计出中指定的数据项。 用户学习数据 json 文件下载: http://labfile.oss.aliyuncs.com/courses/764/user_study.json user_study.json 文件部分内容展示如下: {“minutes”: …

    2022年2月5日
    2.1K0
  • 两个简单的Pycharm激活方法分享

    一、Pycharm激活码激活 优点:Window、Mac、Ubantu都稳定有效,关键是这种激活方式不会产生其他影响 缺点:需要修改hosts文件 修改hosts文件 将0.0.0.0 account.jetbrains.com添加到hosts文件最后,注意hosts文件无后缀,如果遇到无法修改或权限问题,可以采用覆盖的方法去替换hosts文件 修改后请检查…

    2020年3月14日
    2.7K0
  • JSP分页思想—核心代码

    try{condition=”select * from employee_info”; sql=conn.createStatement(); rs=sql.executeQuery(condition); int intPageSize; //一页显示的记录数 int intRowCount; //记录总数 int intPageCount; //总页数…

    2019年10月30日
    2.1K0
  • aspx文件编码不统一导致乱码

    今天发现了一个很奇怪的现象,页面在VS2008下面,有些页面乱码,而有些則不会。 上网查找了很多方法均不能解决,根据以前开发asp,php的经验,怀疑这些页面的编码可能不一样。 在VS2008下面还真的不知道在哪里看文件的编码,用Dreamweaver打开一个乱码跟一个不乱码的页面对比了一下,发现一个是gb2312(不乱码),而别外一个则是utf-8(乱码)…

    2019年2月14日
    2.3K0

发表回复

登录后才能评论