项目源码：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中的引用路径
（四）这时候我们可以测试拍照和录像功能，但是你会发现，点击拍照和录像记录无法预览
这是因为我们还没有引入图片和视频预览的页面，找到
（五）再修改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++;
}
（三）加入上传按钮
在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();
}
至此，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的路径即可
十四、保证手机和后台在一个局域网中，赶快测试一下吧。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
