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