隨著移動(dòng)設(shè)備的普及，越來越多的網(wǎng)站需要進(jìn)行拍照并上傳的操作。在這樣的背景下，jquery包含的攝像頭API能夠讓開發(fā)者方便地調(diào)用相機(jī)拍照并上傳圖片。本文將介紹如何使用jquery實(shí)現(xiàn)這樣的操作。

//獲取相機(jī)區(qū)域的DOM對(duì)象
var cameraArea = $("#camera-area");
//獲取用于顯示圖片的DOM對(duì)象
var imageEl = $("#image-preview");
//調(diào)用攝像頭拍照
cameraArea.on("click", function(){
navigator.camera.getPicture(uploadPhoto, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
})
//上傳圖片
function uploadPhoto(imageURI) {
//將圖片顯示出來以供預(yù)覽
imageEl.attr("src", imageURI);
//使用jquery的ajax方法上傳圖片
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
//構(gòu)造FormData對(duì)象并上傳
var ft = new FileTransfer();
ft.upload(imageURI, encodeURI("http://example.com/upload"), successCallback, errorCallback, options);
}
function onFail(message) {
alert('Failed because: ' + message);
}
function successCallback(){
alert("上傳成功")
}
function errorCallback(){
alert("上傳失敗")
}

上面的代碼片段中，首先通過jQuery選擇器獲取到用于拍照的DOM對(duì)象和用于展示圖片的DOM對(duì)象。接著，在拍照按鈕的click事件中使用navigator.camera.getPicture方法調(diào)用相機(jī)，拍照完成后會(huì)得到圖片的本地URI。

接下來的uploadPhoto方法中，我們把獲取到的圖片URI顯示在頁面上以供用戶預(yù)覽，并通過jquery的ajax方法上傳圖片，如果上傳成功則彈出"上傳成功"提示。如果上傳失敗則會(huì)彈出"上傳失敗"提示。

總之，使用jquery調(diào)用相機(jī)拍照并上傳圖片非常簡單，只需要一些javascript知識(shí)和一點(diǎn)jquery基礎(chǔ)即可實(shí)現(xiàn)。希望本文能夠?qū)Υ蠹矣兴鶐椭?/p>