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

  • 第二课:Maven的下载安装及环境变量配置

    一、Maven的下载 下载地址:http://maven.apache.org/download.cgi 下载完成后,得到一个压缩包apache-maven-***-bin.zip,解压,可以看到maven的组成目录 Maven目录分析 bin:含有mvn运行的脚本 boot:含有plexus-classworlds类加载器框架 conf:含有setting…

    2023年1月27日 编程开发
    3760
  • 简!python中安装pip的方法

     pip的安装 打开cmd,输入以下命令安装pip: python -m ensurepip –default-pip 出现如下图所示,代表pip安装成功: 查看pip版本 pip –version 更新pip版本 python -m pip install –upgrade pip 安装库 例如安装pyyaml库,打开cmd输入以下命令: pip i…

    2023年5月18日
    1.0K0
  • input file获取文件路径时无法获取正确的路径

    页面有一个input file服务器控件,一个div,div是image标签的容器,当点击input file的值改变,我们往div里追加image标签;但当通过js的onchange事件动态获取input file 的路径的时候,发现console.log(path)打印出的路径是被浏览器屏蔽的, 例如:C:\fakepath\file.jpg 这是由于浏…

    2019年11月13日
    5.8K0
  • python 初学者练手上机实操三

    一、题目:键盘输入三角形的三边,求三角形的周长。 1、新建一个triangle.py文件 2、编写程序。 3、调试程序。 4、排除错误。 二、题目:导入turtle包(import turtle),绘制边长为100的正方形。 要求: 1、新建一个“turtle2.py”文件 2、编写程序。 3、调试程序。 4、排除错误。 三、题目:打印诗“悯农” 要求: 1…

    2023年5月5日
    2950
  • Java GUI编程高级实例二:弹出式菜单及添加工具栏

    三、 为组件定制弹出式菜单 问题的提出  为“Java Editor”程序的文本编辑区域定制如图所示的的弹出式菜单。 菜单中有五个菜单项组成,分别指示了不同的字体风格,可通过菜单项的选择实现文本区域中文本字体和字号的改变。 用JPopupMenu类建立弹出式菜单 建立弹出式菜单 预先定义一个继承JPopupMenu类的子类,弹出式菜单施加给的对象应由构造方法…

    2020年1月22日
    2.1K0
  • python pywifi库破解wifi密码提示“No module named ‘comtypes’”的解决方法

    在免费蹭网!破解WiFi密码的Python程序源码分享一文中,125建站网提供了详细的程序代码。 python中的pywifi库,利用它可以暴力破解一些简单的wifi密码,有些同学运行程序时提示错误:“No module named ‘comtypes’”! python中的No module named ‘comtypes’ 解释是…

    2023年1月29日
    2.0K0

发表回复

登录后才能评论