Cordova - 从相册中选择照片并上传，以及拍照上传
1，安装需要的插件
2，选择设备照片并上传 
3，拍照并上传
下面代码样例，当点击按钮后会掉用摄像头拍照，并在页面上显示出来。同时拍摄照片会上传到服务器上。
不管是从相册中选择图片上传，还是拍照上传。我们都需要如下先安装如下三个插件：Camera（相机）、file（文件访问操作）、fileTransfer（文件传输）。
如果没有安装的话，先安装下：
cordova plugin add cordova-plugin-camera cordova plugin add cordova-plugin-file cordova plugin add cordova-plugin-file-transfer
2，选择设备照片并上传
下面代码样例，点击按钮后会打开系统相册来选择照片，选中的照片会显示在页面上。同时会把选择的照片上传到服务器。
注意：camera 插件除了可以选择图片外，也可以选择视频。如果需要实现选择视频功能，我们只要在 getPicture 方法最后一个参数对象中添加 mediaType:navigator.camera.MediaType.VIDEO 配置即可。
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource;
var destinationType;
document.addEventListener("deviceready",onDeviceReady,false);
//Cordova加载完成会触发
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
//获取照片
function getPhoto(source) {
//quality : 图像的质量，范围是[0,100]
navigator.camera.getPicture(onPhotoURISuccess,
function(error){console.log("照片获取失败！")},
{ quality: 50, destinationType: destinationType.FILE_URI, sourceType: source });
}
//获取照片成功
function onPhotoURISuccess(imageURI) {
//打印出照片路径
console.log(imageURI);
//显示照片
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
upload(imageURI);
}
//上传文件
function upload(fileURL) {
//上传成功
var success = function (r) {
console.log("上传成功! Code = " + r.responseCode);
}
//上传失败
var fail = function (error) {
alert("上传失败! Code = " + error.code);
}
var options = new FileUploadOptions();
options.fileKey = "file1";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
//options.mimeType = "text/plain";
//上传参数
var params = {};
params.value1 = "test";
params.value2 = "param";
options.params = params;
var ft = new FileTransfer();
//上传地址
var SERVER = "http://www.hangge.com/upload.php"
ft.upload(fileURL, encodeURI(SERVER), success, fail, options);
};
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:23px;" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">
从相册选择照片并上传
</button> <br>
<img style="display:none;" id="largeImage" src="" width="300px" />
</body>
</html>
下面代码样例，当点击按钮后会掉用摄像头拍照，并在页面上显示出来。同时拍摄照片会上传到服务器上。
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var destinationType;
document.addEventListener("deviceready",onDeviceReady,false);
//Cordova加载完成会触发
function onDeviceReady() {
destinationType=navigator.camera.DestinationType;
}
//拍照
function capturePhoto() {
//拍照并获取Base64编码的图像（quality : 存储图像的质量，范围是[0,100]）
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI }
);
}
//拍照成功
function onPhotoDataSuccess(imageURL) {
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = imageURL;
//开始上传
upload(imageURL);
}
//拍照失败
function onFail(message) {
alert('拍照失败: ' + message);
}
//上传文件
function upload(fileURL) {
//上传成功
var success = function (r) {
console.log("上传成功! Code = " + r.responseCode);
}
//上传失败
var fail = function (error) {
alert("上传失败! Code = " + error.code);
}
var options = new FileUploadOptions();
options.fileKey = "file1";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
//上传参数
var params = {};
params.value1 = "test";
params.value2 = "param";
options.params = params;
var ft = new FileTransfer();
//上传地址
var SERVER = "http://www.hangge.com/upload.php"
ft.upload(fileURL, encodeURI(SERVER), success, fail, options);
};
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:23px;" onclick="capturePhoto();">拍摄照片并上传</button> <br>
<img style="display:none;width:240px;height:320px;" id="smallImage" src="" />
</body>
</html>
附：服务端代码（upload.php）
<?
$value1 = $_POST["value1"];
$value2 = $_POST["value2"];
move_uploaded_file($_FILES["file1"]["tmp_name"],
$_SERVER["DOCUMENT_ROOT"]."/upload/" . $_FILES["file1"]["name"]);
echo "服务器收到如下数据：\r";
echo $value1."\r";
echo $value2."\r";
echo $_FILES["file1"]["name"]."\r";
?>
你好想請問一下 error.code = 3 3的錯誤訊息要在哪邊查詢
我php端的設定
<?php
header("Content-Type: text/html; charset=utf-8");
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept');
$new_image_name = strtolower($_FILES['file']['name']);
move_uploaded_file($_FILES["file"]["tmp_name"], "uploadFiles/".$new_image_name);
?>
不太會部屬php端 可否給個提示