一、创建Cordova工程使用命令创建一个Cordova工程,进入工程目录,添加对Android平台的支持,具体命令可参考下图。
二、改写index.html文件改写Cordova工程根目录下的www目录下的index.html网页(也可以在Andeoid平台中的www目录下改写index.html,不过那样就不能使用命令直接打包运行,当然可以导入到eclipse中,使用eclipse打包运行)。
三、添加Cordova插件支持拍照自然需要调用系统的相机,需要添加camera插件,上传成功或失败都会有对话框显示信息,需要dialogs插件,上传文件需要file-transfer插件,具体命令参考下图。注意:这里是Cordova5.x版本的插件,各版本插件有差别,具体参考Cordova API
四、设置服务器端这里服务器端使用Tomcat服务器,新建个web工程(这里为upLoad),工程里面新建三个文件夹:fileupload(用于存放上传的图片)、META-INF和WEB-INF
新建UpLoadImage.jsp文件用于接受上传文件,并将文件写入图片文件夹中。具体代码如下:<%@page contentType='text/html;charset=UTF-8' pageEncoding='UTF-8' language='java'%><%@page import='java.io.*'%><%@page import='java.util.List'%><%@page import='org.apache.commons.fileupload.*'%><%@page import='org.apache.commons.fileupload.util.Streams'%><%@page import='org.apache.commons.fileupload.servlet.ServletFileUpload'%><% request.setCharacterEncoding('UTF-8'); // Check that we have a file upload request if(ServletFileUpload.isMultipartContent(request)) { // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(); // Parse the request FileItemIterator iter = upload.getItemIterator(request); while(iter.hasNext()) { FileItemStream item = iter.next(); String fieldName = item.getFieldName(); InputStream is = item.openStream(); if(item.isFormField()) //regular form field { %>
<%=fieldName%> --> <%=Streams.asString(is)%>
<% } else { //file upload String fileName = item.getName(); File uploadedFile = new File(getServletContext().getRealPath('/') + 'fileupload'+ File.separator + fieldName + '_' + fileName); OutputStream os = new FileOutputStream(uploadedFile); // write file to disk and close outputstream. Streams.copy(is, os, true); %>upload file <%=uploadedFile.getName()%> done!
<% } } }%>五、添加文件上传的jar包支持在WEB-INF文件夹下新建lib文件夹,里面放置commons-fileupload-1.3.1.jar与commons-io-2.4.jar文件。
六、打包运行我们打开手机的调试模式,将手机用数据线连上电脑,然后在命令行中使用cordova run android将Cordova工程打包成apk安装包并在手机上安装运行。
七、结果演示点击“拍照上传”按钮,调用系统照相机,实现拍照,然后上传。
源码:http://pan.baidu.com/s/1jGWHjng