PHP+Mysql : โปรแกรมอัพโหลดภาพทีละหลายๆภาพด้วย Ajax+PHP+Database , Multiple upload image
แจกโปรแกรมอัพโหลดภาพทีละหลายๆภาพด้วย Ajax+PHP+Database ให้ไปพัฒนาต่อครับ ใช้งานได้ดีมากๆ ผมทดลองใช้กับหลายโปรเจคแล้วลูกค้าชอบมากครับ จึงนำมาแบ่งปันครับ ^_^ ปล.คำอธิบาย code ดูใน code ได้เลยนะครับทำคอมเม้นเป็นภาษาไทยให้แล้ว
สร้างฐานข้อมูลก่อนแล้วค่อยสร้างตารางจาก sql ด้านล่างนี้นะครับ
|
1 2 3 4 5 6 |
CREATE TABLE `uploadsimg` ( `upload_id` int(11) NOT NULL auto_increment, `image_name` text, `dateupload` timestamp NOT NULL default CURRENT_TIMESTAMP, PRIMARY KEY (`upload_id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; |
ไฟล์เชื่อมต่อฐานข้อมูลจ้าา db.php
|
1 2 3 4 5 6 7 8 |
<?php $mysql_hostname = "localhost"; $mysql_user = "root"; $mysql_password = "password"; $mysql_database = "uploadimg"; $con = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong"); mysql_select_db($mysql_database, $con) or die("การเชื่อมต่อผิดพลาด"); ?> |
ฟอร์มรับข้อมูล index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<html> <head> <title>โปรแกรมอัพโหลดภาพทีละหลายๆภาพด้วย Ajax+PHP+Database</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <script src="js/jquery.min.js"></script> <script src="js/jquery.wallform.js"></script> <script> //สร้าง function สำหรับการแสดงตัวอย่างภาพที่อัพโหลด $(document).ready(function() { $('#photoimg').die('click').live('change', function() { //$("#preview").html(''); $("#imageform").ajaxForm({target: '#preview', beforeSubmit:function(){ //เมื่ออัพโหลดภาพไปแล้วจะแสดงไฟล์ .gif loading console.log('ttest'); $("#imageloadstatus").show(); $("#imageloadbutton").hide(); }, //อัพโหลดเสร็จแล้วซ่อนไฟล์ .gif loading success:function(){ console.log('test'); $("#imageloadstatus").hide(); $("#imageloadbutton").show(); }, //error error:function(){ console.log('xtest'); $("#imageloadstatus").hide(); $("#imageloadbutton").show(); } }).submit(); }); }); </script> <style> body { font-family:arial; } #preview { color:#cc0000; font-size:12px } .imgList { max-height:150px; margin-left:5px; border:1px solid #dedede; padding:4px; float:left; } </style> <body> <div align="center"> <h1>โปรแกรมอัพโหลดภาพทีละหลายๆภาพด้วย Ajax+PHP+Database</h1> <!-- ส่วนแสดงภาพที่อัพโหลดเข้าไป --> <div id='preview'> </div> <form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both"> <div id='imageloadstatus' style='display:none'> <img src="loading.gif" alt="Uploading...."/></div> <div id='imageloadbutton'> <!-- เลือกได้หลายๆไฟล์ในครั้งเดียว name="photos[]" multiple="true" --> <br> เลือกไฟล์ภาพ : <input type="file" name="photos[]" id="photoimg" multiple="true" /> </div> </form> </div> </div> </body> </html> |
จากไฟล์ฟอร์ม action มาที่ไฟล์นี้นะครับ ajaxImageUpload.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<?php error_reporting(0); include('db.php'); define ("MAX_SIZE","2000"); // 2MB MAX file size function getExtension($str) { $i = strrpos($str,"."); if (!$i) { return ""; } $l = strlen($str) - $i; $ext = substr($str,$i+1,$l); return $ext; } // ตรวจสอบนามสกุลของภาพที่อัพโหลด $valid_formats = array("jpg", "png", "gif", "bmp","jpeg"); if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") { $uploaddir = "uploads/"; //โฟลเดอร์ที่เก็บภาพ อย่าลืมสร้างนะครับ!! foreach ($_FILES['photos']['name'] as $name => $value) { $filename = stripslashes($_FILES['photos']['name'][$name]); $size=filesize($_FILES['photos']['tmp_name'][$name]); //Convert extension into a lower case format $ext = getExtension($filename); $ext = strtolower($ext); //File extension check if(in_array($ext,$valid_formats)) { //ขนาดของภาพหน้ามเกิน 1mb if ($size < (MAX_SIZE*1024)) { $image_name=time().$filename; echo "<img src='".$uploaddir.$image_name."' class='imgList'>"; $newname=$uploaddir.$image_name; //อัพโหลดไฟล์ไปในโฟลเดอร์ที่กำหนด if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname)) { //เพิ่มเข้าฐานข้อมูล mysql_query("INSERT INTO uploadimg(image_name)VALUES('$image_name')"); } else { echo '<span class="imgList">You have exceeded the size limit! so moving unsuccessful! </span>'; } } else { echo '<span class="imgList">You have exceeded the size limit!</span>'; } } else { echo '<span class="imgList">Unknown extension!</span>'; } } //foreach end } ?> |
ดาวน์โหลดไฟล์ jquery.wallform.js jquery.min.js
**อย่าลืมเอาไปพัฒนาต่อและแบ่งปันเพื่อนๆนะครับ
ref:http://www.9lessons.info/2013/09/multiple-ajax-image-upload-jquery.html
ตะกร้าสินค้า v1 v2 V3
V1 = 1500 บาท, V2=2,500 บาท, V3=3,500 บาท
ระบบยืม-คืน เบิก-จ่ายพัสดุอุปกรณ์สำนักงาน 5,000 บาท
ระบบแจ้งซ่อมออนไลน์ 1,000 บาท
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/