แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeehtml5 อัพโหลด preview
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ html5 อัพโหลด preview
UPDATE! อัพเดทล่าสุด 23-02-2020
- อัพเดทครั้งที่ 2 เลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลดพร้อมกันได้
- ตัวอย่างเพิ่มเติม ที่เกี่ยวข้อง http://niik.in/que_2192_5112
- รองรับการลบรายการได้ อยู่ในเนื้อหาเพิ่มเติม ที่ 3 และ 4
- อัพเดทครั้งที่ 2 เลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลดพร้อมกันได้
- ตัวอย่างเพิ่มเติม ที่เกี่ยวข้อง http://niik.in/que_2192_5112
- รองรับการลบรายการได้ อยู่ในเนื้อหาเพิ่มเติม ที่ 3 และ 4
ไปที่ Copy
เมื่อมี html5 เข้ามา ทำให้การแสดงตัวอย่าง รูปภาพ ก่อนการอัพโหลด
ทำได้โดยง่าย โค้ดตัวอย่างนี้ เป็นการประยุกต์เล็กน้อย จากโค้ดหลายๆ ที่
มารวมกัน ต้ดความสามารถที่ยังไม่สมบูรณ์ออก
สิ่งที่ตัวอย่างทำได้คือ แสดงตัวอย่างไฟล์รูปภาพที่เลือกก่อน ทำการอัพโหลด
สามารถเลือกไฟล์ ที่จะอัพโหลดได้หลายๆ ไฟล์ โดยกด ctrl หรือ shift เพื่อเลือกรายการรูปภาพ
ตัวอย่าง
บันทึกข้อมูล
ไฟล์ show_data.php ดูผลตัวอย่างการส่งค่า รับค่าตัวแปร $_FILES ไปใช้
<pre> <?php print_r($_POST); echo "<br>"; echo "<br>"; print_r($_FILES); ?> </pre>
ไฟล์ index.html ไฟล์โค้ดตัวอย่าง
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style type="text/css"> .drop-area{ width:100px; height:25px; border: 1px solid #999; text-align: center; padding:10px; cursor:pointer; } #thumbnail img{width:100px;height:100px;margin:5px;} canvas{border:1px solid red;} </style> </head> <body> <br> <div style="margin:auto;width:80%;"> <h3> บันทึกข้อมูล</h3> <form class="form" id="myFrom" method="post" action="show_data.php" role="form" enctype="multipart/form-data"> <div class="form-group"> <lable class="control-label">Name : </lable> <input type="text" autocomplete="off" class="form-control" name="name"> </div> <div class="form-group"> <lable class="control-label">Picture : </lable> <input id="file_upload" style="display:none" name="file_upload[]" type="file" multiple="true"> <div id="upload" class="btn btn-info"> Upload File </div> <div id="thumbnail"></div> </div> <button type="submit" class="btn btn-primary">เพิ่มข้อมูล</button> </form> <br> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" > $(function () { $("#upload").on("click",function(e){ $("#file_upload").show().click().hide(); e.preventDefault(); }); $("#file_upload").on("change",function(e){ var files = this.files showThumbnail(files) }); function showThumbnail(files){ $("#thumbnail").html(""); for(var i=0;i<files.length;i++){ var file = files[i] var imageType = /image.*/ if(!file.type.match(imageType)){ // console.log("Not an Image"); continue; } var image = document.createElement("img"); var thumbnail = document.getElementById("thumbnail"); image.file = file; thumbnail.appendChild(image) var reader = new FileReader() reader.onload = (function(aImg){ return function(e){ aImg.src = e.target.result; }; }(image)) var ret = reader.readAsDataURL(file); var canvas = document.createElement("canvas"); ctx = canvas.getContext("2d"); image.onload= function(){ ctx.drawImage(image,100,100) } } // end for loop } // end showThumbnail }); </script> </body> </html>
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017
การเลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลด ดูที่กระทู้นี้
เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 07-12-2017
ตัวอย่างโค้ด การเลือกไฟล์แบบหลายครั้ง เช่นการเลือกไฟล์ที่อยู่คนละโฟลเดอร์ เพื่ออัพโหลดพร้อมกันได้
ปรับเรื่องการไม่สร้าง input file ใหม่ถ้ายังไม่เลือก ป้องกันรายการที่ไม่ได้เลือกไฟล์ ดูตัวอย่างประกอบได้ที่
demo 1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <style type="text/css"> .drop-area{ width:100px; height:25px; border: 1px solid #999; text-align: center; padding:10px; cursor:pointer; } #thumbnail img{width:100px;height:100px;margin:5px;} #thumbnail div.removepic:hover{ display:inline-block; border:1px dashed red; } canvas{border:1px solid red;} </style> </head> <body> <br> <div style="margin:auto;width:80%;"> <h3> บันทึกข้อมูล</h3> <form class="form" id="myFrom" method="post" action="show_data.php" role="form" enctype="multipart/form-data"> <div class="form-group"> <lable class="control-label">Name : </lable> <input type="text" autocomplete="off" class="form-control" name="name"> </div> <div class="form-group"> <lable class="control-label">Picture : </lable> <div id="upload" class="btn btn-info"> Upload File </div> <div id="thumbnail"></div> </div> <button type="submit" class="btn btn-primary">เพิ่มข้อมูล</button> </form> <br> </div> <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" > $(function () { $("#upload").on("click",function(e){ var lastFile = $(".file_upload:last").length; if(lastFile >= 0){ if(lastFile == 0 || $(".file_upload:last").val()!=""){ var objFile= $("<input>",{ "class":"file_upload", "type":"file", "multiple":"true", "name":"file_upload[]", "style":"display:none", change: function(e){ var files = this.files showThumbnail(files) } }); $(this).before(objFile); $(".file_upload:last").show().click().hide(); }else{ $(".file_upload:last").show().click().hide(); } } e.preventDefault(); }); function showThumbnail(files){ // $("#thumbnail").html(""); for(var i=0;i<files.length;i++){ var file = files[i] var imageType = /image.*/ if(!file.type.match(imageType)){ // console.log("Not an Image"); continue; } var image = document.createElement("img"); var thumbnail = document.getElementById("thumbnail"); image.file = file; thumbnail.appendChild(image); var reader = new FileReader(); reader.onload = (function(aImg){ return function(e){ aImg.src = e.target.result; }; }(image)) var ret = reader.readAsDataURL(file); var canvas = document.createElement("canvas"); ctx = canvas.getContext("2d"); image.onload= function(){ ctx.drawImage(image,100,100) } } // end for loop } // end showThumbnail }); </script> </body> </html>
เพิ่มเติมเนื้อหา ครั้งที่ 3 วันที่ 23-02-2020
โค้ดตัวอย่างการประยุกต์ รองรับการลบรายการ
ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์เพิ่มเติม โดยสามารถเลือกลบรายการ โดยคลิกที่รูปพรีวิว
ที่ต้องการลบได้ โดยเงื่อนไข คือ ต้องตัดการกำหนดแบบ multiple ออก นั่นคือจะเลือกรูปได้ที่ละ
1 รูปแต่สามารถเลือกหลายครั้งได้ โดยยังอัพโหลดได้ที่ละหลายรูป แต่แค่เลือกรูปได้ครั้งละ 1 รูปนั่นเอง
เหตุผลเพื่อให้สามารถลบลูปที่ต้องการได้ง่ายขึ้น ตัวอย่างโค้ดดังด้านล่าง และดูตัวอย่างที่ DEMO 2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css"> .drop-area{ width:100px; height:25px; border: 1px solid #999; text-align: center; padding:10px; cursor:pointer; } #thumbnail,div.removepic{ display: flex; flex-wrap: wrap; } #thumbnail img{width:100px;height:100px;margin:5px;} #thumbnail div.removepic:hover{ display:inline-block; border:1px dashed red; } canvas{border:1px solid red;} </style> </head> <body> <br> <div style="margin:auto;width:80%;"> <h3> บันทึกข้อมูล</h3> <form class="form" id="myFrom" method="post" action="show_data.php" role="form" enctype="multipart/form-data"> <div class="form-group"> <lable class="control-label">Name : </lable> <input type="text" autocomplete="off" class="form-control" name="name"> </div> <div class="form-group"> <lable class="control-label">Picture : </lable> <div id="upload" class="btn btn-info"> Upload File </div> <div id="thumbnail"></div> </div> <button type="submit" class="btn btn-primary">เพิ่มข้อมูล</button> </form> <br> </div> <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" > $(function () { $("#upload").on("click",function(e){ var lastFile = $(".file_upload:last").length; if(lastFile >= 0){ if(lastFile == 0 || $(".file_upload:last").val()!=""){ var objFile= $("<input>",{ "class":"file_upload", "type":"file", "name":"file_upload[]", "style":"display:none", change: function(e){ var files = this.files showThumbnail(files) } }); $(this).before(objFile); $(".file_upload:last").show().click().hide(); }else{ $(".file_upload:last").show().click().hide(); } } e.preventDefault(); }); function showThumbnail(files){ // $("#thumbnail").html(""); for(var i=0;i<files.length;i++){ var file = files[i] var fileName = file.name; var imageType = /image.*/ if(!file.type.match(imageType)){ // console.log("Not an Image"); continue; } var image = document.createElement("img"); var wrapImg = document.createElement("div"); var thumbnail = document.getElementById("thumbnail"); wrapImg.className = 'removepic'; wrapImg.setAttribute("data-file", fileName); image.file = file; wrapImg.appendChild(image); thumbnail.appendChild(wrapImg); var reader = new FileReader(); reader.onload = (function(aImg){ return function(e){ aImg.src = e.target.result; }; }(image)) var ret = reader.readAsDataURL(file); var canvas = document.createElement("canvas"); ctx = canvas.getContext("2d"); image.onload= function(){ ctx.drawImage(image,100,100) } } // end for loop } // end showThumbnail // ส่วนจัดการ การลบรูปที่ไม่ต้องการอัพโหลด จากการกดที่ // หรือคลิกที่รูปที่ต้องการลบ $(document.body).on("click","div.removepic",function(){ var removeFileName = $(this).data("file"); var files = $("input.file_upload"); var filesLength = files.length; for(var f = 0; f < filesLength; f++){ var fileLists = files[f].files; if(fileLists !== undefined){ for(var fl = 0; fl < fileLists.length; fl++){ if(fileLists[fl].name === removeFileName) { $(files[f]).remove(); break; } } }; } $(this).remove(); }); // จำลองแสดงข้อมูลชื่อไฟล์ ที่จะทัำการอัพโหลด // ส่วนนี้หากใช้งานจริง ตัดออกได้ หากไม่ได้ส่งข้อมูลแบบ ajax // เอาไว้ดูว่าไฟล์ที่จะอัพโหลดถูกต้องหรือไม่ ในขั้นตอนการทดสอบ $("form#myFrom").submit(function(e){ e.preventDefault(); var files = $("input.file_upload"); var filesLength = files.length; for(var f = 0; f < filesLength; f++){ var fileLists = files[f].files; if(fileLists !== undefined){ for(var fl = 0; fl < fileLists.length; fl++){ console.log(fileLists[fl].name); } }; } }); }); </script> </body> </html>
เพิ่มเติมเนื้อหา ครั้งที่ 4 วันที่ 23-02-2020
โค้ดตัวอย่างการประยุกต์ รองรับการลบรายการ วิธีที่ 2
ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์เพิ่มเติม โดยสามารถเลือกลบรายการ โดยคลิกที่รูปพรีวิว
ที่ต้องการลบได้ ยังใช้งานการเลือกรูปทีละหลายๆ รูปได้ โดยคง multiple เป็น true ไว้ แนวทางที่ใช้
คือ เมื่อเลือกรายการที่จะลบ จะทำการสร้าง input hidden ชื่อ remove_file เพื่อส่งไปกับฟอร์มใน
ขั้นตอนการอัพโหลด แล้วใช้เงื่อนไขในฟังก์ server เลือกเฉพาะรูปที่ไม่อยู่ใน remove_file เงื่อนไขไฟล์
show_data.php แนวทางจะเป็นดังนี้
<pre> <?php print_r($_POST); echo "<br>"; echo "<br>"; //print_r($_FILES); if(isset($_FILES['file_upload'])){ $arr_removeFiles = array(); if(isset($_POST['remove_file'])){ $arr_removeFiles = $_POST['remove_file']; } $totalFile = count($_FILES['file_upload']['name']); // จำนวนไฟล์ทั้งหมด for($i = 0; $i < $totalFile; $i++){// วนลูปอัพโหลดไฟล์ $fileName = $_FILES['file_upload']['name'][$i]; $fileUpload = $_FILES['file_upload']['tmp_name'][$i]; if(!in_array($fileName, $arr_removeFiles)){ // อัพโหลดเฉพาะไฟล์ ที่ไม่ได้ลบ echo "Upload: ".$fileName."<br>"; } } } ?> </pre>
วิธีการนี้คือ สมมติเราเลือกไฟล์ a.jpg b.jpg และ c.jpg แล้ว ด้วยรูปแบบการใช้งาน input file แบบ multiple เรา
ไม่สามารถแก้ไขไฟล์ที่เลือกไปแล้วได้ จึงใช้วิธีส่งชื่อไฟล์ไปทั้ง แล้วเก็บชื่อไฟล์ที่ต้องการลบ เมื่อเลือกรูปที่ต้องการ
ลบไว้ใน input hidden พอเราส่งชื่อไฟล์ที่จะอัพโหลดทั้งหมดก่อนลบ และชื่อไฟล์ที่จะลบไปใช้งานใน ฝั่ง server
ก็ใช้คำสัง php ในการกำหนดเงื่อนไข ให้ทำการอัพโหลดเฉพาะรูปหรือไฟล์ที่ไม่อยู่ในรายการที่จะลบนั่นเอง
ไฟล์ ทดสอบกรณีนี้ดูตัวอย่างใน DEMO 3
ทั้ง 3 DEMO จะคล้ายๆ กัน แต่จะมีเงื่อนไขและรูปแบบการทำงานและการใช้งานที่แตกต่างกัน
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css"> .drop-area{ width:100px; height:25px; border: 1px solid #999; text-align: center; padding:10px; cursor:pointer; } #thumbnail,div.removepic{ display: flex; flex-wrap: wrap; } #thumbnail img{width:100px;height:100px;margin:5px;} #thumbnail div.removepic:hover{ display:inline-block; border:1px dashed red; } canvas{border:1px solid red;} </style> </head> <body> <br> <div style="margin:auto;width:80%;"> <h3> บันทึกข้อมูล</h3> <form class="form" id="myFrom" method="post" action="show_data.php" role="form" enctype="multipart/form-data"> <div class="form-group"> <lable class="control-label">Name : </lable> <input type="text" autocomplete="off" class="form-control" name="name"> </div> <div class="form-group"> <lable class="control-label">Picture : </lable> <div id="upload" class="btn btn-info"> Upload File </div> <div id="thumbnail"></div> </div> <button type="submit" class="btn btn-primary">เพิ่มข้อมูล</button> </form> <br> </div> <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" > $(function () { $("#upload").on("click",function(e){ var lastFile = $(".file_upload:last").length; if(lastFile >= 0){ if(lastFile == 0 || $(".file_upload:last").val()!=""){ var objFile= $("<input>",{ "class":"file_upload", "type":"file", "multiple":"true", "name":"file_upload[]", "style":"display:none", change: function(e){ var files = this.files showThumbnail(files) } }); $(this).before(objFile); $(".file_upload:last").show().click().hide(); }else{ $(".file_upload:last").show().click().hide(); } } e.preventDefault(); }); function showThumbnail(files){ // $("#thumbnail").html(""); for(var i=0;i<files.length;i++){ var file = files[i] var fileName = file.name; var imageType = /image.*/ if(!file.type.match(imageType)){ // console.log("Not an Image"); continue; } var image = document.createElement("img"); var wrapImg = document.createElement("div"); var thumbnail = document.getElementById("thumbnail"); wrapImg.className = 'removepic'; wrapImg.setAttribute("data-file", fileName); image.file = file; wrapImg.appendChild(image); thumbnail.appendChild(wrapImg); var reader = new FileReader(); reader.onload = (function(aImg){ return function(e){ aImg.src = e.target.result; }; }(image)) var ret = reader.readAsDataURL(file); var canvas = document.createElement("canvas"); ctx = canvas.getContext("2d"); image.onload= function(){ ctx.drawImage(image,100,100) } } // end for loop } // end showThumbnail // ส่วนจัดการ การลบรูปที่ไม่ต้องการอัพโหลด จากการกดที่ // หรือคลิกที่รูปที่ต้องการลบ $(document.body).on("click","div.removepic",function(){ var removeFileName = $(this).data("file"); var files = $("input.file_upload"); var filesLength = files.length; for(var f = 0; f < filesLength; f++){ var fileLists = files[f].files; if(fileLists !== undefined){ for(var fl = 0; fl < fileLists.length; fl++){ if(fileLists[fl].name === removeFileName) { var removeImg = $("<input>",{ "type":"hidden", "name":"remove_file[]", "value":removeFileName }); $(files[f]).after(removeImg); break; } } }; } $(this).remove(); }); }); </script> </body> </html>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง
-
15 Feb2013สร้างฟังก์ชันสำหรับอัพโหลดรูป แบบกำหนดเงื่อนไข อย่างง่าย อ่าน 20,267
เนื้อหาต่อไปนี้ จะเป็นตัวอย่างการใช้งานฟังก์ชั่น สำหรับอัพโหลดรูปภาพ
-
กำลังอ่านเนื้อหานี้อยู่16 Sep2014แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย อ่าน 18,345
พิเศษ เฉพาะสมาชิก เมื่อมี html5 เข้ามา ทำให้การแสดงตัวอย่าง รูปภาพ ก่อนการอัพโหลด ทำได้โดยง
-
05 Jul2016การใช้งาน FormData() ใน HTML5 อัพโหลดไฟล์ผ่าน ajax ด้วย jquery อ่าน 28,014
เนื้อหาต่อไปนี้ เป็นบันทึกช่วยจำ เกี่ยวกับการประยุกต์ใช้งาน FormData Object จ
-
06 Mar2017แจกโค้ด ajax เพิ่ม ลบ แก้ไข แบ่งหน้า ร่วมกัน bootstrap modal อ่าน 34,435
พิเศษ เฉพาะสมาชิก ตัวอย่างโค้ดที่นำมาแจกต่อไปนี้ เป็นการประยุกต์การใช้งาน ajax ใน jquery กับการ
เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก
กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ
ยังไม่เป็นสมาชิก
สมาชิกล็อกอิน
สมาชิกล็อกอิน
( หรือ เข้าใช้งานผ่าน Social Login )
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()