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 拍照上傳!