多语言展示
当前在线:952今日阅读:11今日分享:15

cordova5.x拍照上传(附源码)

在日常生活中我们经常会使用拍照的功能,拍照过后希望上传到云上去。作为开发人员也要经常开发此方面的应用,本文就cordova5.x版本的的拍照上传进行讲解。
方法/步骤
1

一、创建Cordova工程使用命令创建一个Cordova工程,进入工程目录,添加对Android平台的支持,具体命令可参考下图。

2

二、改写index.html文件改写Cordova工程根目录下的www目录下的index.html网页(也可以在Andeoid平台中的www目录下改写index.html,不过那样就不能使用命令直接打包运行,当然可以导入到eclipse中,使用eclipse打包运行)。

3

改写的index.html文件内容如下:                                           

        
          返回          

我的视频

          搜索        
        
        
                                   
                     
         
        

欢迎测试

        

4

三、添加Cordova插件支持拍照自然需要调用系统的相机,需要添加camera插件,上传成功或失败都会有对话框显示信息,需要dialogs插件,上传文件需要file-transfer插件,具体命令参考下图。注意:这里是Cordova5.x版本的插件,各版本插件有差别,具体参考Cordova API

5

四、设置服务器端这里服务器端使用Tomcat服务器,新建个web工程(这里为upLoad),工程里面新建三个文件夹:fileupload(用于存放上传的图片)、META-INF和WEB-INF

6

新建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!

                                     <%                            }                   }         }%>

7

五、添加文件上传的jar包支持在WEB-INF文件夹下新建lib文件夹,里面放置commons-fileupload-1.3.1.jar与commons-io-2.4.jar文件。

8

六、打包运行我们打开手机的调试模式,将手机用数据线连上电脑,然后在命令行中使用cordova run android将Cordova工程打包成apk安装包并在手机上安装运行。

9

七、结果演示点击“拍照上传”按钮,调用系统照相机,实现拍照,然后上传。

注意事项

源码:http://pan.baidu.com/s/1jGWHjng

推荐信息