cordova 拍照上传!
1，安装需要的插件
2，选择设备照片并上传 
3，拍照并上传
下面代码样例，当点击按钮后会掉用摄像头拍照，并在页面上显示出来。同时拍摄照片会上传到服务器上。
原文出自：www.hangge.com
不管是从相册中选择图片上传，还是拍照上传。我们都需要如下先安装如下三个插件：Camera（相机）、file（文件访问操作）、fileTransfer（文件传输）。
如果没有安装的话，先安装下：
|
1
2
3
|
cordova plugin add cordova-plugin-cameracordova plugin add cordova-plugin-filecordova 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
