移动端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中各个文件的功能以及部署的过程。欢迎指正及讨论。转载请注明出处。