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

  • Pycharm Django项目 NameError: name ‘os’ is not defined

    Pycharm Djarngo项目报错 NameError: name ‘os’ is not defined 原因:这里调用了os模块,但是文件头并没引用os模块解决办法:在settings.py文件头加上 import os

    2024年12月2日
    3080
  • Myeclipse设置JSP视图和代码显示在同一个窗口

    Myeclipse开发时,想同时查看页面及代码视图,如上图,而默认只能看到代码。 Myeclipse设置JSP页面和代码显示在同一个窗口的方法有两种。 一、在JSP页面上右击-open with-other… 在弹出的Editor selection窗口中选择web page editor,就可以了。 二、选择 window-preferences,如下图,…

    2018年12月17日 编程开发
    3.9K0
  • 两个简单的Pycharm激活方法分享

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

    2020年3月14日
    3.2K0
  • myeclipse注册方法(在哪输入注册码?)

    知道了myeclipse注册码,在哪里输入? Subscriber:AdministratorSubscription Code:NLR8ZC-855550-68537056870845987 运行myeclipse  依次打开window—-preferences—-MyEclipse Enterprise Workbench&#8…

    2020年2月23日
    4.8K0
  • 第五章 JavaBean技术

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

    2018年2月22日
    2.5K0
  • 第3课:C语言程序的构成和书写规则

    先来看一个C语言程序:输入两个正整数,计算并输出两数的和。 程序代码: /*ex1_2.c:求两个正整数的和*/ #include <stdio.h> void main()                         /*主函数*/ {     int a,b,sum;                    /*定义三个整型变量*/    …

    2020年4月5日
    4.0K0

发表回复

登录后才能评论