Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > การทำ Progress Bar ดูใน ขณะอับโหลดไฟล์ ว่าสำเร็จหรือเปล่า



 

การทำ Progress Bar ดูใน ขณะอับโหลดไฟล์ ว่าสำเร็จหรือเปล่า

 



Topic : 129966



โพสกระทู้ ( 28 )
บทความ ( 0 )



สถานะออฟไลน์




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
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2018-01-15 18:54:38 By : lemon29 View : 1410 Reply : 1
 

 

No. 1



โพสกระทู้ ( 28 )
บทความ ( 0 )



สถานะออฟไลน์


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
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : การทำ Progress Bar ดูใน ขณะอับโหลดไฟล์ ว่าสำเร็จหรือเปล่า
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่