|
 |
| |
สอบถาม ฟังก์ชั่น mime_content_type กับ is_executable ต่างกันยังไงครับ มีเว็บไทยไหมครับ |
| |
 |
|
|
 |
 |
|
ขอบคุณครับ
|
 |
 |
 |
 |
| Date :
2018-01-28 19:44:29 |
By :
lemon29 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
xhr.upload.onprogress กับ xhr.onprogress ระหว่างมี :uplaod" กับไม่มี ต่างกันยังไงครับ พอดีผมไม่ใส่ไม่สามารถอับโหลดได้ และ ลองเปลี่ยนชื่อ อับโหลด ก็ไม่สามารถ อับโหลดได้ครับ
อ้างอิงจาก : https://zinoui.com/blog/ajax-request-progress-bar
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>
<div><progress id="progress" value="0" max = "100" style="width:50%"></progress></div>
<div><span id="display"></span></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();//ไม่ต้องเปิดไฟล์ที่ลาก
var fs = event.dataTransfer.files;//เรียกไฟล์ที่ปล่อยเม้าไปออกมาจาก event
var progressBar = document.getElementById("progress");//new
var display = document.getElementById("display");
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",true);//ส่งข้อมูล method ไปยัง ไฟล์ move_upload
xhr.upload.onprogress = function (e)
{
if (e.lengthComputable)// ค่าไฟล์ที่ส่งมา "e" มาทำ progressbar///lengthComputable คือการคำนวนไฟล์
{
//var ratio = Math.floor((e.loaded / e.total) * 100) + '%';//Math.floor ไม่เอาทศนิยม
//console.log(ratio);
progressBar.max = e.total;
progressBar.value = e.loaded;
display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
}
}
xhr.upload.onloadstart = function (e)
{
progressBar.value = 0;
display.innerText = '0%';
}
xhr.upload.onloadend = function (e)
{
progressBar.value = e.loaded;
}
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-28 19:45:07 |
By :
lemon29 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
xhr.,upload.onprogress เฉพาะการส่งไฟล์ จะมี event ทุก step การส่งไฟล์เป็นชุดๆ
จำไม่ได้แล้วว่าฃุดละกี่ bytes ถ้าจำไม่ผิด ก็ 4096 (4kb) หรือ 1024 (1kb) รวม recheck ลองค้นเอาหน่อย
ส่วน xhr.onprogress รวมการส่งข้อมูลอื่นๆ จะมี event สำหรับการ upload file เฉพาะเมื่อ upload file เสร็จแล้วเท่านั้น
ส่วนใหญ่จะใช้งานส่วนนี้เมื่อเรา ต้องการส่ง datastream ยาวๆ
ส่วนเรื่อง โค๊ด คงต้องหาเอาเอง เพราะโดยส่วนตัวไม่ได้สนใจเรื่องของ progress bar สักเท่าไหร่
มักจะทำเป็นแค่ image gif หมุนติ้วๆ ให้รู้ว่าทำงานพอ 555555
|
| |
|
|
| |
| Date :
2018-01-28 21:53:18 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
