สำนักวิทยบริการและเทคโนโลยีสารสนเทศ (สวส.)

Office of Academic Resources and Information Technology


Office of Academic Resources and Information Technology

การอัพโหลดรูปภาพด้วย jquery + ajax

ขั้นตอนการอัพโหลดรูปภาพด้วย 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>
</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>
 
3. html สำหรับสร้างฟอร์มอัพโหลด
 
<body>
<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" />
<input type="button" name="button" id="imageUpload" value="อัพโหลดรูป">
</form>
</div>
<div id="viewImage" align="center"></div>
</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."'>";
                        
                        }
                    
            }
            
        
?>