cordova 拍照上傳!
阿新 • • 發佈：2017-08-02
[0 navi doctype char ber tex padding title ati 1，安裝需要的插件
不管是從相冊中選擇圖片上傳，還是拍照上傳。我們都需要如下先安裝如下三個插件：Camera（相機）、file（文件訪問操作）、fileTransfer（文件傳輸）。
如果沒有安裝的話，先安裝下：
2，選擇設備照片並上傳 下面代碼樣例，點擊按鈕後會打開系統相冊來選擇照片，選中的照片會顯示在頁面上。同時會把選擇的照片上傳到服務器。
3，拍照並上傳
下面代碼樣例，當點擊按鈕後會掉用攝像頭拍照，並在頁面上顯示出來。同時拍攝照片會上傳到服務器上。
原文出自：www.hangge.com
| 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();
//上傳地址
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>
|
3，拍照並上傳
下面代碼樣例，當點擊按鈕後會掉用攝像頭拍照，並在頁面上顯示出來。同時拍攝照片會上傳到服務器上。
| 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();
//上傳地址
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>
|
原文出自：www.hangge.com
cordova 拍照上傳!