精!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%的人还看了以下文章

  • 第三章 JSP技术1

    了解JSP相关技术
    掌握JSP基本语法
    掌握JSP指令标识和动作标识
    掌握JSP的内置对象及使用

    2018年2月2日
    1.4K0
  • 单元测试步骤、单元测试策略,单元测试快速入门教程三

    工作性质不同决定了工作侧重点也不同,因此程序开发人员在单元测试过程中关注更多的是程序代码本身和已经实现的功能。因此,站在他们的角度看,单元测试的过程就是在编写测试方法之前: 首先考虑如何对方法进行测试; 然后编写测试代码; 下一步就是运行某个测试,或者同时运行该单元的所有测试,确保所有测试都通过。 下图从宏观的角度概括了单元测试的工作过程图。 1.单元测试进…

    2018年4月18日
    2.8K0
  • Java课程设计报告-记事本源代码有流程图

    Java课程设计报告 题 目:简单记事本程序的设计年级专业:计算机科学与技术  软件工程学 号:学生姓名:指导老师: 目    录 摘要… 1 前言… 2 1需求分析… 2 1.1需求分析… 2 1.2功能设计… 3 2.概要设计… 3 2.1程序设计思路… 3 2.2程序运…

    2019年10月4日
    1.4K0
  • MVC(JSP+JavaBean+Servlet)+MYSQL入门实例:实现用户登陆

    MVC(JSP+JavaBean+Servlet)+MYSQL实现用户登陆模块,具体功能: 客户在登陆页面Login.html输入用户名和密码,提交表单,由Servlet(LoginValidate.java)调用JavaBean(LoginDBO.java)验证用户名和密码,最后调用视图returnMessage.jsp显示,如果成功显示成功信息,不成功显…

    2018年11月27日 编程开发
    6.5K0
  • 第五章 JavaBean技术

    掌握:
    JavaBean的概念及规范
    JavaBean的创建与使用
    JavaBean属性的获取及修改
    getProperty:获取bean的属性值
    setProperty:设置bean的属性值

    2018年2月22日
    9950
  • 第2课:编写第一个C语言程序

      用C语言语句编写的程序称为C程序或C源程序。 下面编写第一个C语言程序,这个程序是在Visual C++ 环境下编译通过的。 Microsoft Visual C++(简称Visual C++、MSVC、VS或VC)是微软公司的C++开发工具,具有集成开发环境,可提供编辑C语言,C++以及C++/CLI等编程语言。 【例1.1】用C语言编写一个…

    2020年4月5日
    2.0K0

发表评论

登录后才能评论