|
 |
| |
การทำ Progress Bar ดูใน ขณะอับโหลดไฟล์ ว่าสำเร็จหรือเปล่า |
| |
 |
|
|
 |
 |
|
move_upload.php
คือผมต้องการ Progress Bar ดูใน ขณะอับโหลดไฟล์ ว่าสำเร็จ หรือ ไม่สำเร็จ แล้ว มีโค้ด แบบ php หรือ Js แแบบ พื้นฐานไม่อยากไหมครับ แล้วใส่ไว้ส่วนไหครับ
Code (PHP)
<?php
session_start();
include "conn.php";
$Mem_ID = $_SESSION['ses_user_id'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $title_web; ?></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<?php
if(!empty($_FILES))
{
//*************************************Create Folder******************************
//เพื่อป้องกัน file ของ user ชื่อซ้ำกัน ตั้งfile_uploads/ID ของ user นั้น
$folder = "file_uploads/" . $Mem_ID . '/';//เก็บไฟล์ไว้ที่ไหน
if (!file_exists($folder))//ถ้าfloder นี้ไม่มีให้สร้าง folder ใน if
{
mkdir($folder, 0777);//0777 permission
}
//**********************************End Create Folder******************************
$fileTamp = $_FILES['upfile']['tmp_name'];//ต้นทางไฟล์
$fileName = $_FILES['upfile']['name'];//ชื่อไฟล์
$fileSize = $_FILES['upfile']['size'];//ขนาดไฟล์
$type = $_FILES['upfile']['type'];//นามสกุล
//**********************************ที่อยู่ของไฟล์*********************************
for($i=0;$i<count($fileName);$i++)
{
$targetFile[$i] = $folder.$fileName[$i];//เอาชื่อไฟล์กับ folder มาต่อกัน = เป้าหมายไฟล์
}
//**********************************จบ ที่อยู่ของไฟล์*********************************
//************************Check header files**************************************************
for($i=0;$i<count($fileTamp);$i++)
{
if (is_executable($fileTamp[$i]))
{
echo "<div class='error'> Can't upload " . $fileName[$i] . " because file type .exe</div>";
exit;
}
}
//************************จบ Check header files**************************************************
//************************Check Type**************************************************
for($i=0;$i<count($fileName);$i++)
{
//substr หา 4ตัวท้าย มีคำว่า.exe อยู่
//ถ้ามีไฟล์ .exe ไฟล์เดียว ก็จะยกเลิกทั้งหมด
if (substr($fileName[$i],-4) == ".exe")
{
echo "<div class='error'> Can't upload " . $fileName[$i] . " because invalid file format</div>";
exit;
}
}
//************************END Check Type**************************************************
//************************Check Size**************************************************
//เช็คว่าใน Mem_storage เหลือเท่าไร
$sql = mysqli_query($conn,"select * from member where Mem_ID = '$Mem_ID' ") or die (mysqli_error());
$result = mysqli_fetch_assoc($sql);
$total = $result['Mem_Storage'];//ผลรวมไฟล์ของสมาชิก แปลงเป็นหน่วย MB มาจาก ข้างล่างแล้ว
//check ไฟล์ที่เพิ่งอับโหลดเข้าไป และ แปลงหน่วยจาก byte เป็น MB
$filetotal = 0;
for($i=0;$i<count($fileSize);$i++)
{
$fileSize[$i] = $fileSize[$i]/1024/1024;// แปลงขนาดไฟล์เป็น mb fileมาเป็นmb/1024kb/1024b
$filetotal += $fileSize[$i];//ผมรวมไฟล์ที่อับโหลดเข้ามา
}
//echo $filetotal."<br>";//ไฟล์ที่ใส่เข้าไป
//echo $total."<br>";//ไฟล์ที่มีอยู่
//echo $filetotal+$total;//ผลรวมไฟล์
//echo $total-$filetota;
if($total-$filetotal <= 0 )//ถ้าเกินไฟล์นึง ก็จะ ยกเลิกทั้งหมด
{
echo "<div class='error'> File Size Over Limit - Fail</div>";
exit;
}
//************************END Check Size**************************************************
//************************Upload Finnish**************************************************
for($i=0;$i<count($fileName);$i++)
{
//**********************************gen url******************************
$ret_char = "";//ค่าว่าง
$chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";//0-61ตัว
$num = strlen($chars);//ความยาวstr ได้62ตัว
for($a = 0; $a < 9; $a++)
{
$ret_char.= $chars[rand()%$num];//วนลูบ9รอบนำมาต่อกัน แรนด้อมเลขmodด้วยความยาวstr หารเอาเศษ
}
//**********************************End gen url******************************
if (file_exists($targetFile[$i]))//ถ้ามีชื่อไฟล์อยุ่แล้วไม่ให้อับโหลด
{
echo "<div class='warning'>Upload File " . $fileName[$i] . " already exist! </div>";
}
else if(move_uploaded_file($fileTamp[$i], $targetFile[$i]))//ชื่อไฟล์,ปลายทางที่จะย้ายไฟล์ไฟล์
{
@mysqli_query($conn,"insert file_upload set Fil_File = '".$Mem_ID . '/' . $fileName[$i]."',Fil_Size = '".$fileSize[$i]."',Fil_Link = '$ret_char',Fil_DateCreate = now(), Fil_Expire = DATE_ADD(now(), INTERVAL 30 DAY ) ,Mem_ID = '$_SESSION[ses_user_id]'")or die (mysqli_error());
echo "<div class='success'>Upload File " . $fileName[$i] . " sucess </div>";
$sql = mysqli_query($conn,"select * from member where Mem_ID = '$Mem_ID' ") or die (mysqli_error());
$result = mysqli_fetch_assoc($sql);
$total = $result['Mem_Storage']-$fileSize[$i];
@mysqli_query($conn,"UPDATE member SET Mem_Storage = '$total' WHERE Mem_ID = '$Mem_ID' ") or die (mysqli_error());
}
}
//************************End Upload Finnish**************************************************
echo '<a href="upload.php">click to refresh!</a>';
}
?>
</body>
</html>
Tag : PHP, HTML, CSS, HTML5, Appserv
|
ประวัติการแก้ไข
2018-01-15 18:56:21
|
 |
 |
 |
 |
| Date :
2018-01-15 18:54:38 |
By :
lemon29 |
View :
1503 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
upload.php
Code (PHP)
<?php
session_start();
require_once "conn.php";
$Mem_ID = $_SESSION['ses_user_id'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $title_web; ?></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<?php
//**********************Check area for me*******************************//
$sql = mysqli_query($conn,"select * from member where Mem_ID = '$Mem_ID' ") or die (mysqli_error());
$result = mysqli_fetch_assoc($sql);
$total = $result['Mem_Storage'];
$total = round($total,3);
echo "<h1 <div align = center>คุณมีพื้นที่เหลืออยู่ $total MB/300 MB</div>";
echo"<HR>";
if($result['Mem_Storage'] < 0)
{
echo '<div align = "center"> พื้นที่ของท่านได้เต็มแล้ว ไม่สามารถอับโหลดได้ </div>';
}
else
{
//**********************end Check area for me*******************************//
?>
<!--****************************** START CSS******************************-->
<style>
.dropzone /*กล่องใช้ลากไฟล์*/
{
width: 700px; /*กว้าง*/
height : 400px;/*สูง*/
text-align: center;/*คำพูดDrop file here อยุ่ตรงกลาง*/
border: 2px gray dashed;/*กล่อง : ขนาด สี เส้นประ กล่องเทา*/
line-height: 400px;/*ตัวหนังสือ drop file here ว่าจัดให้อยู่ตรงไหน*/
color: gray;/*ตัวหนังสือ*/
margin:0 auto;/*บนล่าง,ซ้ายขวา*/
}
.dropzone.dragover/*ลากเข้า จะเปลี่ยนสีขอบ กับ ช้อความ กล่องดำ*/
{
border-color: black;/*เส้นขอบ*/
color: black;/*ตัวหนังสือ*/
}
.error
{
color:red;
}
.success
{
color:green;
}
.warning
{
color:orange;
}
</style>
<!--****************************** END CSS******************************-->
<!--***************************************************************-->
<div id = "status"> No File!</div>
<hr>
<div class ="dropzone" id = "js-dropzone">Drop file here</div>
<div>
<input type="button" value="MyFile" onClick="window.location='file_upload.php';" style="width:150px;height:30px">
<input type="button" value="<< Back Home" onClick="window.location='index.php';" style="width:150px;height:30px">
</div>
<!--****************************************************************-->
<!--****************************** START JS******************************-->
<script>
var ele = document.getElementById('js-dropzone');//เรียกจาก id js-dropzone เก็บในตัวแปร ele
ele.ondragover = function()//ลากเข้ามาในพื้นที่ เมื่อele โดน dragover
{
ele.className = "dropzone dragover";//ให้classname ไปแทน class ใน css และ css จะเป็นกลายเป็นขอบดำ classname ใน js = class ในcss
return false;
}
//ลากออกพื้นที่ เมื่อele โดน dragleave
ele.ondragleave = function()
{
ele.className = "dropzone";//ให้classname ไปแทน class ใน css และ css จะเป็นกลายเป็นขอเทา
return false;
}
ele.ondrop = function(event)//ondrop คือเมื่อยปล่อยเม้า
{
event.preventDefault();//ไม่ต้องเปิดไฟล์ที่ลาก
//upload(event.dataTransfer.files);//dataTransfer คล้ายๆ folder ซ้อน folder ว่าเราต้องการทำอะไร ซึ่งอับโหลดไฟล์อยุ่ที่ Folder นี้
var fs = event.dataTransfer.files;//เรียกไฟล์ที่ปล่อยเม้าไปออกมาจาก event
var xhr = new XMLHttpRequest();//ทำงานแต่ยังอยู่ในหน้าเดิม คนส่งของ
var formdata = new FormData();//แนบไฟล์ใน data ซองจดหมาย
var i ;
for(i=0; i<fs.length; i++)//วนลูบไฟล์ที่อับโหลด
{
formdata.append("upfile[]",fs[i]);//ส่งข้อมูล key[],value[]
}
xhr.open("post","move_upload.php");//ส่งข้อมูล method ไปยัง ไฟล์ move_upload
xhr.send(formdata);//ส่งแล้ว ส่งให้ formdata ไปทำงานที่ move_upload
xhr.onload = function()//เมื่อuploadเสดให้ทำอะไร หลังจาก xhr.send(formdata)ถึงจะทำ ****ส่งข้อมูลเรียบร้อย และตอบกลับมา
{
var status = document.getElementById('status');
status.innerHTML = xhr.responseText;//php echo = js responseText กลับมา แล้วเอาไปปะไว้ใน innerHTML ของ status
//innerHTML เปลี่ยนข้อมูลข้างในตัว แปร status
}
}
</script>
<!--****************************** END JS******************************-->
<?php
}
?>
</body>
</html>
|
| |
|
|
| |
| Date :
2018-01-15 18:55:09 |
By :
lemon29 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
