这篇文章主要为大家详细介绍了HTML5+Canvas+jquery技术，调用手机拍照功能实现图片上传。
不懂原理的新手，可以先学习：超清晰！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解码，解出来的路径即为上传图片的路径地址，然后再进行存储，写到文件或者数据库里面。
下一篇会讲到在Java后台进行图片上传操作。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/10951.html
微信扫一扫 
支付宝扫一扫