移动端H5拍照代码实现及外网部署

  最近的工作中,遇到了一个需求:对于无APP登陆权限的人员,提供拍照上传功能,以便生成更完善的出工记录。经研究讨论,决定实现的机制为:由合法的人员登陆APP认领相关工作任务,并生成当天当工作的唯一二维码,无APP登陆权限的人员扫描二维码,使用H5页面进行自拍,完善出工记录。我负责了H5拍照及拍照信息保存部分。该部分工作独立性较强,其中也有许多难点的解决过程值得记录。所以写了这篇文章记录,并且在github中写了一个demo。希望能帮助到有需要的人。

一:环境配置

  简介:该demo前端使用h5+jquery,后端使用java。因为时间关系,没有保存数据库。移动端拍完照后,直接保存到了服务器本地文件夹下。

  1.从github下载demo,并引入到ecplise中。

  2.服务器使用tomcat,建议使用Catalina\localhost路径下新增.xml文件来配置服务,注意若xml文件有名称时,如a.xml,tpf.js 中的action请求需要需要加上/a 。否则web.xml 无法捕获相应请求

  3.文件传输需要的jar包都在lib下面,引入就行(ojdbc.jar是后续完善可能会用到的jar),另外还需要引入你tomcat的common/lib下面的jsp-api.jar 和 servlet-api.jar

  4.tpf下的xr.properties配置了文件保存根路径,这里的文件是用于ecplise上方便查看和版本管理的,真正起作用的是WEB-INF/classes下的xr.properties。布置服务时请注意替换。

  5.使用tomcat直接启动服务,或者eclipse中配置tomcat,在eclipse中启动服务。服务地址 http://localhost:8090/main/page/tpf.html (第二步中的xml文件的文件名为空时),文件保存路径为E:\tpfData1\image\年\月\日(xr.properties中配置了根路径E:\tpfData1)

  6.内外网映射用了nat123。配置如下

  

  应用类型需要选择80网站,变相的会收取30块钱费用,提供的服务大概能支持100KB的照片上传时不报文件流连接超时。内网端口和内网地址就是你本机访问服务时的地址和端口号,外网域名用他随机的就行。

二:前端代码说明

  1.调用照相机服务是通过

<input type="file" name="file_head" id="file_head" onchange="setImagePreview();" accept="image/*" capture="camera" style="display: none" />

属性 capture="camera" ,会让手机默认调用照相机拍照。不设置该属性的话则会让你选择拍照或从相册中选取照片。

属性 onchange="setImagePreview();" ,是在手机拍照后,获取照片路径并展示在页面上。(为了测试方便也支持电脑网页上传图片类型附件后展示附件)

  2.提交服务是通过form表单提交的。最开始试过ajax,文件流转base64再分段传输,后台再拼接转换成文件流,不知道是编码格式问题还是分段后数据依旧过长,尝试了很久也未成功,最后还是改用了form表单提交。form表单提交后会重定向当前页面,所以设置了 document.forms[0].target = "frameFile"; ,将重定向页面指向了一个隐藏的iframe。监听iframe重定位完成状态,并给出提醒。

  3.为了页面优化,隐藏了”朴素的“的file标签,改用自定义的图片,再在js中调用file标签。

  4.浏览器自带的alert,会显示用户的IP信息,故使用调用common.js中的changeAlert() 方法,隐藏掉了这个IP显示(不适用与IE)。

  5.checkDate() 方法是用于验证url上的参数是否合法,合法后再加载页面监听事件。该功能暂时未实现,故直接加载了监听事件。

三:后台代码说明

  1.文件上传主处理类是UploadFileServlet,该类接受了文件流及基本的数据。另外,该类也获取了请求的ip地址,并将这些数据传给了了特点的文件处理类。

  2.特定的文件处理类是配在js中,该类需要实现了接口UploadFileInterface。获取xr.properties中文件保存的根目录,以及通过当前的时间设置更详细的文件路径,将文件流保存到该文件路径下。

  3.文件加间的斜杠方向通过  System.getProperty("file.separator") 获取,因为windows和linux的文件路径书写方式略有不同。


以上就是该demo中各个文件的功能以及部署的过程。欢迎指正及讨论。转载请注明出处。

  

  

 

  

posted @ 2018-04-26 10:45  有营养的yyl  阅读(...)  评论(...编辑  收藏