ขั้นตอนการอัพโหลดรูปภาพด้วย jquery และ ajax มีด้งนี้
1. จะต้องเรียกไฟล์ jquery.min.js และ jquery.form.js ซึ่งสามารดาวน์โหลดจากเว็บไซต์ได้
<head>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
</head>
2. สร้าง script jquery และ ajax
<script type="text/javascript" >
$(function() {
$('#imageUpload').click(function(){
$("#viewImage").html('');
$("#viewImage").html('<img src="loader.gif" alt="uploading......"/>');
$("#formUpload").ajaxForm({target: '#viewImage'}).submit();
});
});
</script>
$(function() {
$('#imageUpload').click(function(){
$("#viewImage").html('');
$("#viewImage").html('<img src="loader.gif" alt="uploading......"/>');
$("#formUpload").ajaxForm({target: '#viewImage'}).submit();
});
});
</script>
3. html สำหรับสร้างฟอร์มอัพโหลด
<body>
<div align="center">
<div align="center">
<form id="formUpload" method="post" enctype="multipart/form-data" action='uploadData.php'>
Image to Upload <input type="file" name="imageFile" id="imageFile" />
Image to Upload <input type="file" name="imageFile" id="imageFile" />
<input type="button" name="button" id="imageUpload" value="อัพโหลดรูป">
</form>
</form>
</div>
<div id="viewImage" align="center"></div>
</body>
</body>
4. สร้างไฟล์ uploadData.php เพื่ออัพโหลดไฟล์
<?php
$path = "photoUpload/";
$formats = array("jpg", "png", "gif");
$Name = $_FILES['imageFile']['name'];
$Size = $_FILES['imageFile']['size'];
list($txt, $ext) = explode(".", $Name);
if(in_array($ext,$formats))
{
$image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$tmpFile = $_FILES['imageFile']['tmp_name'];
if(move_uploaded_file($tmpFile, $path.$image_name))
{
//Query ฐานข้อมูล
echo "<img src='photoUpload/".$image_name."'>";
}
}
$Name = $_FILES['imageFile']['name'];
$Size = $_FILES['imageFile']['size'];
list($txt, $ext) = explode(".", $Name);
if(in_array($ext,$formats))
{
$image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$tmpFile = $_FILES['imageFile']['tmp_name'];
if(move_uploaded_file($tmpFile, $path.$image_name))
{
//Query ฐานข้อมูล
echo "<img src='photoUpload/".$image_name."'>";
}
}
?>