隨著移動設備的普及,越來越多的網站需要進行拍照并上傳的操作。在這樣的背景下,jquery包含的攝像頭API能夠讓開發者方便地調用相機拍照并上傳圖片。本文將介紹如何使用jquery實現這樣的操作。
//獲取相機區域的DOM對象
var cameraArea = $("#camera-area");
//獲取用于顯示圖片的DOM對象
var imageEl = $("#image-preview");
//調用攝像頭拍照
cameraArea.on("click", function(){
navigator.camera.getPicture(uploadPhoto, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
})
//上傳圖片
function uploadPhoto(imageURI) {
//將圖片顯示出來以供預覽
imageEl.attr("src", imageURI);
//使用jquery的ajax方法上傳圖片
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
//構造FormData對象并上傳
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對象和用于展示圖片的DOM對象。接著,在拍照按鈕的click事件中使用navigator.camera.getPicture方法調用相機,拍照完成后會得到圖片的本地URI。
接下來的uploadPhoto方法中,我們把獲取到的圖片URI顯示在頁面上以供用戶預覽,并通過jquery的ajax方法上傳圖片,如果上傳成功則彈出"上傳成功"提示。如果上傳失敗則會彈出"上傳失敗"提示。
總之,使用jquery調用相機拍照并上傳圖片非常簡單,只需要一些javascript知識和一點jquery基礎即可實現。希望本文能夠對大家有所幫助!
上一篇css怎么看行距
下一篇jquery貪吃蛇做不來