ASP.NET - การอัพโหลดไฟล์ พร้อมแสดงความคืบของหน้าไฟล์ Progress dialog (C#)
Written by admin    Thursday, 09 September 2010 12:44
ตัวอย่างการ upload ไฟล์ รูป หรือ ไฟล์อื่น ๆ โดยระหว่างการอัพโหลด จะมีการแสดงความคืบหน้าของการ upload (progress bar) โดยใช้ javaScript แบบง่าย ๆ  ใช่ร่วมกับภาษา ASP.NET (C#) ทั้งยังสามารถนำไปประยุกค์ใช้กับภาษาอื่น ๆ ได้เช่นกันค่ะ 
ภายในโค้ดตัวอย่าง จะมีการตรวจสอบ (Validations)ซึ่งจะมีประโยชน์ในขณะที่ทำการ อัพโหลดไฟล์ เช่น ตรวจสอบขนาดไฟล์ไฟล์ที่มีอยู่แล้วในระบบไฟล์ที่ไม่สามารถใช้งานได้รูปแบบไฟล์ จำพวก นามสกุล ที่กำหนดให้ upload ได้เท่านั้น


ลองมาดูภาพตัวอย่าง และ ตัวอย่างโค้ดกันค่ะ

file-Upload-progress-bar

ส่วนของ CSS ใน Head ของไฟล์ .aspx

<head runat="server">
    <title>Simple Progress bar</title> 
    <style>
<!-- 
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>
</head>


ส่วนของ JavaScript ใน head ของไฟล์ .aspx

<script script language="javascript" type="text/javascript">    
    var duration=2 // Specify duration of progress bar in seconds

    var _progressWidth = 100;    // Display width of progress bar

    var _progressBar = new String(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
    var _progressEnd = 10;
    var _progressAt = 0;

    // Create and display the progress dialog.

    // end: The number of steps to completion

    function ProgressCreate(end) {
        // Initialize state variables

        _progressEnd = end;
        _progressAt = 0;

        // Move layer to center of window to show

        if (document.all) {    // Internet Explorer

            progress.className = 'show';           
            progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
            progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);            
        } else if (document.layers) {    // Netscape

            document.progress.visibility = true;
            document.progress.left = (window.innerWidth/2) - 100;
            document.progress.top = pageYOffset+(window.innerHeight/2) - 40;
        } else if (document.getElementById) {    // Netscape 6+

            document.getElementById("progress").className = 'show';
            var l = (window.innerWidth/2) - 100;
            var t = pageYOffset + (window.innerHeight/2) - 40;
            document.getElementById("progress").style.left = l + "px";
            document.getElementById("progress").style.top = t + "px";
//            document.getElementById("progress").style.left = (window.innerWidth/2) - 100;

//            document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40;

//          Above 2 lines modified by Nilesh Thakkar on 23-July-2007

        }

        ProgressUpdate();    // Initialize bar

    }

    // Hide the progress layer

    function ProgressDestroy() {
        // Move off screen to hide

        if (document.all) {    // Internet Explorer

            progress.className = 'hide';
        } else if (document.layers) {    // Netscape

            document.progress.visibility = false;
        } else if (document.getElementById) {    // Netscape 6+

            document.getElementById("progress").className = 'hide';
        }
    }

    // Increment the progress dialog one step

    function ProgressStepIt() {
        _progressAt++;
        if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
        ProgressUpdate();
    }

    // Update the progress dialog with the current state

    function ProgressUpdate() {
        var n = (_progressWidth / _progressEnd) * _progressAt;
        if (document.all) {    // Internet Explorer

            var bar = document.all["dialog"].document.getElementById("bar");
            //var bar = dialog.bar;

            //Above line is modified by Nilesh on 23-July-2007

         } else if (document.layers) {    // Netscape         

            var bar = document.layers["progress"].document.forms["dialog"].bar;
            n = n * 0.55;    // characters are larger

        } else if (document.getElementById){        
                    var bar=document.dialog.bar
            }
        var temp = _progressBar.substring(0, n);
        bar.value = temp;
    }

    // Demonstrate a use of the progress dialog.

    function Demo() {
        ProgressCreate(10);
        window.setTimeout("Click()", 100);
    }

    function Click() {
        if(_progressAt >= _progressEnd) {
            ProgressDestroy();
            return;
        }
        ProgressStepIt();
        window.setTimeout("Click()", (duration-1)*1000/10);
    }

    function CallJS(jsStr) { 
      return eval(jsStr);
      //return true;

    }
</script>


ส่วนของ JavaScript ที่ไว้ด้านล่างสุด เป็นส่วน ที่ใช้แสดงผลของ Progress dialog

<script language="JavaScript" type="text/javascript">

// Create layer for progress dialog

document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=\"dialog\" id=\"dialog\">");
document.write("<TABLE border=2 style=\"background-color:Navy;\" >");
document.write("<TR><TD ALIGN=\"center\" style=\"FONT-FAMILY:trebuchet ms; PADDING:0px; FONT-WEIGHT:bold; COLOR:white;\">");
document.write("Please wait<BR>");
document.write("<input type=label name=\"bar\" value=\"Please Wait.........\" size=\"" + _progressWidth/2 + "\"");
if(document.all || document.getElementById)  // Microsoft, NS6

  document.write(" bar.style=\"color:navy;\">");
else // Netscape

  document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides 


</script>


ส่วนของ Control .NET ใน ไฟล์ .aspx

<asp:FileUpload ID="FileUpload1" runat="server"/>
<asp:Button ID="btnUpload" runat="server" Text="Upload File" OnClick="btnUpload_Click" OnClientClick="return CallJS('Demo()');" />

ซึ่งในปุ่ม btnUpload จะมีการทำงานภายใน ที่เขียนใน Code Behind  อีกส่วนหนึ่ง  ดูจากโค้ดตัวอย่างนะคะ





     Download โค้ดตัวอย่าง

To view rest of this section, please login or register..
ในการดูส่วนที่เหลือกรุณาเข้าสู่ระบบหรือลงทะเบียน..
Tags:
Share
 

Add comment


Security code
Refresh

หน้าหลัก บทเรียน ASP.NET ASP.NET - การอัพโหลดไฟล์ พร้อมแสดงความคืบของหน้าไฟล์ Progress dialog (C#)

โปรแกรม Download

ของฟรี ไม่เสียตัง

Joomla template modify by Ban-Goi.com