PhoneGap+JQM实现用手机拍照并且上传图片的例子

10th of September 2012

最近公司在做一个移动版的产品，是基于PhoneGap2.0和JQM1.1.1的开发的。今天在整一个用手机拍照然后上传图片的功能，整整做了一天，没有一天成果，只能实现图片拍照并存储在手机里而已，一直没能实现图片上传的功能。也尝试了从网上搜到的一大堆的例子，均无果，最后近乎崩溃了。

在下午5点多的时候，和公司的一位技术大牛一起探讨，通过各种调试及尝试之后，终于完美地实现了基于PhoneGap+JQM实现手机拍照并且上传图片的功能，现在在这里做好总结备份，并分享给广大需要的同仁们！需要的文件在一起打包了，或者可以自己上网找。

首先是拍照功能：

具体参数请移步到PhoneGap的官网API

http://docs.phonegap.com/en/2.0.0/cordova_camera_camera.md.html#Camera

接着是图片（文件）上传功能：

具体参数请移步到PhoneGap的官网API，主要是FileTransfer这个

http://docs.phonegap.com/en/2.0.0/cordova_file_file.md.html#FileTransfer

废话不多说，贴上源码，由于是公司项目，只能贴上改动过的源码。但具体思路还是能够表达的。

网页文件的部分源码：

<!DOCTYPE html>

<html>

<head>

$(document).bind("mobileinit", function() {

//$.mobile.autoInitialize = false; //删除这行配置参数就会出现渲染错误

$.support.cors = true;

$.mobile.allowCrossDomainPages = true;

});

var pictureSource; // picture source

var destinationType; // sets the format of returned value

// Wait for Cordova to connect with the device

document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready to be used!

function onDeviceReady() {

pictureSource = navigator.camera.PictureSourceType;

destinationType = navigator.camera.DestinationType;

}

// Called when a photo is successfully retrieved

function onPhotoDataSuccess(imageData) {

// Uncomment to view the base64 encoded image data

// console.log(imageData);

// Get image handle

var smallImage = document.getElementById('smallImage');

// Unhide image elements

smallImage.style.display = 'block';

// Show the captured photo

// The inline CSS rules are used to resize the image

//smallImage.src = "data:image/jpeg;base64," + imageData;

smallImage.src = imageData;

}

// Called when a photo is successfully retrieved

function onPhotoURISuccess(imageURI) {

// Uncomment to view the image file URI

// console.log(imageURI);

// Get image handle

var largeImage = document.getElementById('largeImage');

// Unhide image elements

largeImage.style.display = 'block';

// Show the captured photo

// The inline CSS rules are used to resize the image

//largeImage.src = "data:image/jpeg;base64," + imageData;

largeImage.src = imageURI;

}

// A button will call this function

function capturePhoto() {

// Take picture using device camera and retrieve image as base64-encoded string

navigator.camera.getPicture(uploadPhoto, onFail, {

quality : 50,

destinationType : navigator.camera.DestinationType.FILE_URI,//这里要用FILE_URI，才会返回文件的URI地址

//destinationType : Camera.DestinationType.DATA_URL,

sourceType : Camera.PictureSourceType.CAMERA,

allowEdit : true,

encodingType : Camera.EncodingType.JPEG,

popoverOptions : CameraPopoverOptions,

saveToPhotoAlbum : true

});

}

// A button will call this function

function capturePhotoEdit() {

// Take picture using device camera, allow edit, and retrieve image as base64-encoded string

navigator.camera.getPicture(uploadPhoto, onFail, {

quality : 50,

allowEdit : true,

destinationType : destinationType.DATA_URL,

saveToPhotoAlbum : true

});

}

// A button will call this function

function getPhoto(source) {

// Retrieve image file location from specified source

navigator.camera.getPicture(uploadPhoto, onFail, {

quality : 50,

destinationType : destinationType.FILE_URI,//这里要用FILE_URI，才会返回文件的URI地址

sourceType : source

});

}

// Called if something bad happens.

function onFail(message) {

alert('Failed because: ' + message);

}

function uploadPhoto(imageURI) {

var options = new FileUploadOptions();

options.fileKey = "fileAddPic";//用于设置参数，对应form表单里控件的name属性，这是关键，废了一天时间，完全是因为这里，这里的参数名字，和表单提交的form对应

options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);

//如果是图片格式，就用image/jpeg，其他文件格式上官网查API

options.mimeType = "image/jpeg";

options.mimeType = "multipart/form-data";//这两个参数修改了，后台就跟普通表单页面post上传一样 enctype="multipart/form-data"

//这里的uri根据自己的需求设定，是一个接收上传图片的地址

var uri = encodeURI(CONSTANT['context'] + "/user/publish/ajaxUploadPic");

//alert(imageURI);

//alert(uri);

options.chunkedMode = false;

/* var params = new Object();

params.fileAddPic = imageURI;

options.params = params; */

var ft = new FileTransfer();

ft.upload(imageURI, uri, win, fail, options);

}

function win(r) {

alert("上传成功");

var response = r.response;

//alert("response = " + response);

//这里的message是自定义的返回值，具体的根据自己的需求而定

var message = eval("(" + r.response + ")").message;

$("#_picFile").val(message);

//alert("message = " + message);

var imageURI = CONSTANT['context'] + message;

//alert("imageURI =" + imageURI);

onPhotoDataSuccess(imageURI);

onPhotoURISuccess(imageURI);

//alert("Code = " + r.responseCode);

//alert("Response = " + r.response);

//alert("Sent = " + r.bytesSent);

//以下是三个默认的返回参数

console.log("Code = " + r.responseCode);

console.log("Response = " + r.response);

console.log("Sent = " + r.bytesSent);

}

function fail(error) {

alert("An error has occurred: Code = " + error.code);

alert("upload error source " + error.source);

alert("upload error target " + error.target);

console.log("upload error source " + error.source);

console.log("upload error target " + error.target);

}

</script>

</head>

<body>

<h1>拍照并上传图片</h1>

</div>

<br>

<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">从相册选择图片</button>

<br>

<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">从相册选择图片</button>

<br> <img style="display:none;width:120px;height:120px;" id="smallImage" src="" /> <img

style="display:none;width:240px;height:240px;" id="largeImage" src="" />

</div>

<a id="btn_timingsend" href="javascript:void(0);" data-role="button" data-icon="plus">底部菜单</a> <a

href="javascript:void(0);" data-role="button" data-icon="arrow-u">底部菜单</a>

</div>

</div>

</body>

</html>

后台文件的部分源码：

后台整体框架用的是Spring MVC，这里就给出调用图片上传的方法头

@RequestMapping(value = "user/publish/ajaxUploadPic", method = RequestMethod.POST)

public @ResponseBody

ModelAndView ajaxUploadPic(@RequestParam("fileAddPic") final CommonsMultipartFile fileData, final HttpServletResponse response) {

//@RequestParam("fileAddPic")这个其实就是上面的网页文件里的options.fileKey = "fileAddPic"这个参数，其实如果是用浏览器页面的表单进行图片上传，则要求表单控件的name属性为fileAddPic，具体的可以自己设定。

这里就有点疑惑了，如果是多图片或者多文件上传，参数应该怎么设置呢？难道是循环的上传，每次一个文件麽！不明白设计者的思路。不过还是可以用，经过真机测试，绝对可行。

这里就已经实现了文件流的传输了。接着具体如何将文件保存到具体位置，请各位大神自己动手了。

小弟在这里就抛砖引玉了。

}

作者：被梦想绊倒的小马

QQ：395487290

新浪微博：http://weibo.com/u/2055506953

欢迎交流沟通！

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。