从0开始做安卓/IOS拍照摄像上传APP【app+后台】【工具 eclipse+Hbuilder】

项目源码：http://download.csdn.net/detail/jintaohahahaha/9875748

一、搭建开发环境

在你的电脑上安装  eclipse  hbuilder   jdk  tomcat   ，这些步骤不再细说

二、打开Hbuilder

三、新建Demo项目

最后点击完成。

三、新建APP项目

这次新建的是我们的APP

四、我们可以看到，我们Hbuilder项目管理器中有两个项目

其中MyAPP是我们的项目，HELLO5+只是用来复制代码的Demo项目

五、运行HELLO5+项目

手机与电脑通过USB连接，开启USB调试模式

运行结果如下

在其中我们可以找到和

我们的demo就依赖这两个原型来做。

六、拍照录像功能实现

（一）HELLO5+拍照录像页面在  plus/camera.html中，我们将其复制，重命名为index.html并且替换MyAPP中的index.html

（二）打开MyAPP中的index.html，发现其中js和css在html中有冗余，将其分别剥离为index.js和index.css，并分别放入js和css文件夹下，再在index.html中引入

（三）观察index.html我们还发现她分别引了一个外部的js和css

我们在HELLO5+中找到并将他们分别拷贝至MyAPP的js和css文件夹下，并且改变index.html中的引用路径

（四）这时候我们可以测试拍照和录像功能，但是你会发现，点击拍照和录像记录无法预览

            这是因为我们还没有引入图片和视频预览的页面，找到和，复制到我们MyAPP中。修改其中引用的js路径。

（五）再修改index.js预览方法中的路径

（六）至此，拍照录像功能完成

七、上传功能实现

（一）我们使用的是UPLODER实现的上传功能

            通过查看HELLO5+项目plus/uploader.html中代码可知

            她在js中定义了一个数组存文件

（二）我们将index.js进行改造，让其在每次拍照、摄像后也将文件存在数组中，以便后需上传

             在index.js顶部定义一个var files=[];

             新建函数，和变量index       

// 添加文件var index=1;function appendFile(p){var n=p.substr(p.lastIndexOf('/')+1);files.push({name:"uploadkey"+index,path:p});index++;}

在拍照和录像成功后调用appendFile（p）方法

  （三）加入上传按钮

在index.html中加入上传按钮

在index.js中添加其相应方法

var serverUploadUrl = "http://192.168.1.100:8080/upLoadPhoto/upload";//到时候修改为你们服务器相应的地址// 上传文件function upload(){if(files.length<=0){plus.nativeUI.alert("没有添加上传文件！");return;}outSet("开始上传：")var wt=plus.nativeUI.showWaiting();var task=plus.uploader.createUpload(serverUploadUrl,{method:"POST"},function(t,status){ //上传完成if(status==200){outLine("上传成功："+t.responseText);plus.storage.setItem("uploader",t.responseText);wt.close();w.addEventListener("loaded",function(){wt.close();w.show("slide-in-right",300);},false);}else{outLine("上传失败："+status);wt.close();}});task.addData("client","HelloH5+");task.addData("uid",getUid());for(var i=0;i<files.length;i++){var f=files[i];task.addFile(f.path,{key:f.name});}task.start();}// 产生一个随机数function getUid(){    return Math.floor(Math.random()*100000000+10000000).toString();}

（四）在function cleanHistory()方法最后添加files = [];

至此，APP开发完成，快运行试试吧，只是不能上传，别急，我们现在就开始实现上传。

=====================================================前后台分割线==========================================================

后台开发

八、打开myeclipse、新建web项目

九、引入jar包

十、新建一个servlet

十一、servlet代码如下

package com.upLoadPhoto;import java.io.File;import java.io.IOException;import java.util.*;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;public class FileUpload extends HttpServlet {    /** *  */private static final long serialVersionUID = 8788625573740741280L;protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        req.setCharacterEncoding("UTF-8");        fileControl(req, resp);    }protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        req.setCharacterEncoding("UTF-8");        fileControl(req, resp);    }    /**     * 上传文件的处理     */    private void fileControl(HttpServletRequest request, HttpServletResponse response) throws ServletException , ServletException, IOException {     // 上传文件目录        String uploadDir = this.getServletContext().getRealPath("/uploadFile");        DiskFileItemFactory factory = new DiskFileItemFactory();        // 设置内存区块大小4KB        factory.setSizeThreshold(4 * 1024);        // 设置暂存容器，当上传文件大于设置的内存块大小时，用暂存容器做中转        factory.setRepository(new File(this.getServletContext().getRealPath("/temp")));        ServletFileUpload fileUpload = new ServletFileUpload(factory);        fileUpload.setSizeMax(1024 * 1024 * 100);        //fileUpload.setFileSizeMax(1024 * 1024 * 10);        List<FileItem> fileItemList = null;        try {            fileItemList = fileUpload.parseRequest(request);        } catch (Exception e) {            e.printStackTrace();        }        Iterator<FileItem> fileItemIterator = fileItemList.iterator();        FileItem fileItem = null;        while (fileItemIterator.hasNext()) {            fileItem = fileItemIterator.next();            // 普通文件框上传            if (fileItem.isFormField()) {                String filedName = fileItem.getFieldName();                String filedValue = fileItem.getString("GBK");// 编码格式                System.out.println(filedName);// 文件框名称                System.out.println(filedValue);// 文件的值            } else {                String filedName = fileItem.getFieldName();// 文件上传框的名称                // 获取文件上传的文件名                String OriginalFileName = takeOutFileName(fileItem.getName());                System.out.println("原始文件名："+OriginalFileName);                if (!"".equals(OriginalFileName)) {                    // 根据上传的文件名重新命名                    String newFileName = getNewFileName(OriginalFileName);                    System.out.println("重新名："+newFileName);                    File writeToFile = new File(uploadDir + File.separator + newFileName);                    try {                        fileItem.write(writeToFile);                    } catch (Exception e) {                        e.printStackTrace();                    }                }            }        }    }    private String takeOutFileName(String filePath) {        String fileName = filePath;        if (null != filePath && !"".equals(filePath)) {            int port = filePath.lastIndexOf("\\");            if(port != -1){                fileName = filePath.substring(port+1);            }        }        return fileName;    }    private String getNewFileName(String originalFileName) {        StringBuffer newFileName = new StringBuffer();        if (null != originalFileName && !"".equals(originalFileName)) {            int port = originalFileName.lastIndexOf(".");            String type = "";            String fileName = "";            if (port != -1) {                type = originalFileName.substring(port + 1);                fileName = originalFileName.substring(0, port);            } else {                fileName = originalFileName;            }            StringBuffer suffix = new StringBuffer("_");            suffix.append(Calendar.getInstance().getTimeInMillis());            suffix.append("_");            suffix.append(new Random().nextInt(100));            newFileName.append(fileName);            newFileName.append(suffix);            newFileName.append(".");            newFileName.append(type);        }        return newFileName.toString();    }}

十二、不要忘了servlet需要在web.xml中配置哦

十三、最后将MyAPP中index.js中serverUploadUrl修改为你刚刚servlet的路径即可

十四、保证手机和后台在一个局域网中，赶快测试一下吧。

项目源码：http://download.csdn.net/detail/jintaohahahaha/9875748