1，安装需要的插件
2，选择设备照片并上传
3，拍照并上传
下面代码样例，当点击按钮后会掉用摄像头拍照，并在页面上显示出来。同时拍摄照片会上传到服务器上。
原文出自： www.hangge.com
不管是从相册中选择图片上传，还是拍照上传。我们都需要如下先安装如下三个插件：Camera（相机）、file（文件访问操作）、fileTransfer（文件传输）。
如果没有安装的话，先安装下：
|
1
2
3
|
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
|
2，选择设备照片并上传
下面代码样例，点击按钮后会打开系统相册来选择照片，选中的照片会显示在页面上。同时会把选择的照片上传到服务器。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!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();
//上传地址
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>
|
下面代码样例，当点击按钮后会掉用摄像头拍照，并在页面上显示出来。同时拍摄照片会上传到服务器上。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<!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();
//上传地址
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>
|
原文出自： www.hangge.com