var dropzone = document.getElementById("dropzone");//เรียก id ใน หน้า index มาเก็บไว้ในตัวแปร dropzone //ลากใส่แล้วเปลี่ยนสี dropzone.ondragover = function() { this.className = "dropzone dragover"; return false; } //พอลากออกจะกลับ เป็น สีเดิม และ กล่องรุปแบบเดิม dropzone.ondragleave = function() { this.className = "dropzone"; return false; } //เมื่อลากวางแล้ว dropzone.ondrop = function(e)//(e) ส่งค่า { e.preventDefault(); //ไม่ให้ browser โชว์ ไฟล์ที่ใส่ลงไป this.className = 'dropzone'; upload(e.dataTransfer.files); } var upload = function(files) { var xhr = new XMLHttpRequest(); var formdata = new FormData(); var x ; for(x=0; x<files.length; x++) { formdata.append("file[]",files[x]); } xhr.onload = function() { var data = JSON.parse(this.responseText); displayupload(data); } var displayupload = function(data) { var upload = document.getElementById("upload"); var link,x,image; for(x=0; x<data.length; x++) { link=document.createElement('a'); link.href=data[x].file; link.innerText=data[x].name; link.target="_bank"; upload.appendChild(link); } } xhr.open("post","upload.php");//ส่ง method ไปยัง ไฟล์ xhr.send(formdata); }
<?php $upload = array(); if(!empty($_FILES['file']['name'])) { foreach($_FILES['file']['name'] as $position => $name) { if(move_uploaded_file($_FILES['file']['tmp_name'][$position],"upload/".$name)) { $upload[] = array ( 'name' => $name, 'file' => 'upload/'.$name ); } } } echo json_encode($upload); ?>
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet"> </head> <body> <div id = "upload"><br></div> <br><br><hr> <div class ="dropzone" id = "dropzone">Drop file here</div> <!--clss ใช้ของ css idใช้ข้อง javascript--> </body> <script src = "control.js"> </script> </html>
.dropzone /*กล่องใช้ลากไฟล์*/ { width: 500px; /*กว้าง*/ height : 300px;/*สูง*/ text-align: center;/*คำพูดDrop file here อยุ่ตรงกลาง*/ border: 2px gray dashed;/*กล่อง : ขนาด สี เส้นประ*/ line-height: 300px; color: gray; } .dropzone.dragover/*ลาก จะเปลี่ยนสีขอบ กับ ช้อความ*/ { border-color: black; color: black; }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง