เนื้อหาในตอนนี้ เราจะมาศึกษา การอัพโหลดรูปภาพผ่าน phonegap
โดยจะขอเริ่มต้นตั้งแต่การสร้าง app หากใครจะประยุกต์นำไปใช้ ก็สามารถ
ข้ามบางขั้นตอน แล้วไปจุดที่ต้องการได้
เงื่อนไข สมมติเรามีเว็บไซต์ชื่อ www.example.com
เราต้องการจะอัพ รูปภาพจาก มือถือไปที่โฟลเดอร์ mypic
และเรามีไฟล์ php สำหรับอัพโหลดรูป ชื่อ uppic.php อยู่ในโฟลเดอร์ php
มาดู path แบบเต็ม (path สำหรับรุป อย่าลืมกำหนด permission ให้สามารถเขียนเขียนหรือเป็น 777)
path สำหรับเก็บรุป http://www.example.com/mypic/
path สำหรับไฟล์อัพรูป http://www.example.com/php/uppic.php
เริ่มต้น
1. สร้างไฟล์สำหรับอัพโหลดรูป
โค้ดอัพรูป uppic.php อย่างง่าย
<?php
// print_r($_FILES); //อยากรู้ว่าข้อมูลไฟล์ที่ส่งมีอะไรบ้าง เอา comment ออก
if($_FILES['file']['name']!=""){ // เมื่อมีการเลือกไฟล์และอัพโหลด
// ดึงข้อมูลรูปมาไว้ในตัวแปร เราจะใช้ ชนิดไฟล์รุป เพื่อกำหนดนามสกุล
list($old_x,$old_y,$img_type)=getimagesize($_FILES["file"]["tmp_name"]);
switch($img_type) {
case IMAGETYPE_JPEG:
$picType=".jpg";
break;
case IMAGETYPE_GIF:
$picType=".gif";
break;
case IMAGETYPE_PNG:
$picType=".png";
break;
}
$fileName=time().$picType; /// กำหนดชื่อไฟล์ ใหม่
// อัพโหลดไฟล์
move_uploaded_file($_FILES["file"]["tmp_name"],"../mypic/" . $fileName);
echo $fileName; // แสดงชื่อไฟล์ ค่าที่แสดง จะถูกส่งกลับไปในตัา response
}else{
// กรณีไม่มีการเลือกไฟล์ หรืออื่นๆ
}
?>
2. สร้าง phonegap app project (หากใครประยุกต์ก็ข้ามส่วนนี้ไปได้)
C:\phonegap>phonegap create uppic com.example.uppic Uppic
3. เพิ่ม plugin ที่จำเป็น จะมีสองส่วนคือ Camera และ File Transfer
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.file-transfer
4. เข้าไปในโฟลเดอร์ www ลบไฟล์ทั้งหมด (หากใครประยุกต์ก็ข้ามส่วนนี้ไปได้)
C:\phonegap\uppic\www
5. ดาวน์โหลดโค้ด app ตัวอย่าง เบื้องต้น (หากใครประยุกต์ก็ข้ามส่วนนี้ไปได้)
โหลดเสร็จแตกไฟล์ copy ไฟล์และโฟลเดอร์ทั้งหมดไปไว้ในโฟลเดอร์ www ตามข้อ 4
6. เปิดไฟล์ index.html มาแก้ไข
โค้ดไฟล์ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MyDemoApp</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/nyapp.css">
<link rel="stylesheet" href="css/ripples.min.css">
<link rel="stylesheet" href="css/material-wfont.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/define.js"></script>
<script src="js/myapp.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyApp</a>
</div>
</div><!-- /.container-fluid -->
</nav>
<h3 class="text-center">My Test App</h3>
<div class="container-fluid">
<table class="table" style="box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);">
<thead>
<tr class="active">
<th>My Test App</th>
</tr>
</thead>
<tbody>
<tr >
<td>
<!--PHOTOLIBRARY CAMERA-->
<br>
<button type="button" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" class="btn btn-info">Select Photo:</button><br>
<img style="display:none;height:60px;" id="smallImage" src="" />
<br>
<button type="button" onclick="uploadPhoto()" class="btn btn-success">Upload Pic</button>
<br>
<br>
<div class="progress progress-striped active">
<div id="upload-progress-bar" class="progress-bar" style="width: 0%"></div>
</div>
<br>
<pre id="log_data">
</pre>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script type="text/javascript">
$(function(){
$.material.init();
});
</script>
</body>
</html>
7. เปิดไฟล์ js/define.js แก้ไข path ของไฟล์ upload และ path รูปภาพที่อัพโหลดฝั่ง server
ไฟล์ define.js
var php_path="http://www.example.com/php/"; var pic_path="http://www.example.com/mypic/";
8. เปิดไฟล์ js/myapp.js แก้ไขโค้ด ตามด้านล่าง
โฟล์ myapp.js คำอธิบายแสดงในโค้ด
var pictureSource; // ตัวแปรสำหรับเก็บตำแหน่งที่มาของรูป
var destinationType; // ตัวแปรกำหนดรูปแบบค่าที่คืนกลับมา
// เมื่อ cordova ไลบรารี่ โหลดพร้อมใช้งานแล้ว
$(document).on("deviceready",function(){
$("#log_data").append('<br>DeficeReady'); // ทดสอบแสดงสถานะ
pictureSource = navigator.camera.PictureSourceType; // เก็บตำแหน่งของไฟล์รุป
destinationType = navigator.camera.DestinationType; // เก็บรูปแบบไฟล์
});
// ฟังก์ชั่น สำหรับเลือกรูปภาพ เมื่อคลิกที่ปุ่ม
function getPhoto(source) {
// เลือกรูปจากตำแหน่งที่ระบุ
navigator.camera.getPicture(
onPhotoURISuccess, onFail, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
}
);
}
// เมื่อโหลดรูปที่เลือกสำเร็จ
function onPhotoURISuccess(imageURI) {
// แสดงรูปที่เลือก
$("#smallImage").show()
.attr("src",imageURI);
}
// ฟังก์ชั่น เกิดข้อผิดพลาดในการเลือกรูป
function onFail(message) {
$("#log_data").append('<br>Failed because: ' + message);
}
// ฟังก์ชั่น สำหรับอัพโหลดรูป
function uploadPhoto() {
// ตรวจสอบว่ามีการเลือกรูปแล้วหรือไม่
var imageURI = $("#smallImage").attr("src");
if (!imageURI) {
alert('Please select an image first.');
return;
}
// กำหนด options สำหรับการอัพโหลด
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/')+1);
// options.mimeType = "image/jpeg";
options.params = {};
var ft = new FileTransfer();
ft.onprogress = function(progressEvent){
if(progressEvent.lengthComputable){
var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
$("#upload-progress-bar").width(perc+"%"); // ปรับขนาดของ progress
// กรณีกำลังอัพโหลด
}else{
// กรณีหยุดหรืออื่นๆ
}
};
ft.upload(
imageURI,
encodeURI(
php_path+"uppic.php"), // path ไฟล์ php ฝั่ง server
win,
fail,
options
);
}
// ฟังก์ชั่น กรณีอัพโหลดสำเร็จ
function win(r) {
$("#log_data").append("<br>Code = " + r.responseCode);
$("#log_data").append("<br>Response = " + r.response);
$("#log_data").append("<br>Sent = " + r.bytesSent);
}
// ฟังก์ชั่น กรณ๊เกิดข้อผิดพลาดในการอัพโหลด
function fail(error) {
$("#log_data").append("<br>An error has occurred: Code = " + error.code);
$("#log_data").append("<br>upload error source " + error.source);
$("#log_data").append("<br>upload error target " + error.target);
}
9. เป็นอันเสร็จ สร้าง app ด้วยคำสั่ง
phonegap build android
phonegap build android
หากไม่มีอะไรผิดพลาด เราสามารถเลือกรูป และทำการอัพโหลด จะมี
การแสดงสถานะ การอัพโหลดของไฟล์ เราสามารถนำไปประยุกต์เพิ่มเติม
และจัดรูปแบบตามต้องการ ได้ตามความเหมาะสม
