Weil Jimmer's BlogWeil Jimmer's Blog


HTML5上傳進度條
No Comments

發布:
更新:2017-02-18 23:18:40

從網路上查到的AJAX XML Request 的方式,竟然還有這種用法……我都不知道……

廢話不多說,直接分享Code。一看就懂。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Upload Files using XMLHttpRequest - Minimal</title>

    <script type="text/javascript">
      function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
          document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
      }

      function uploadFile() {
        var fd = new FormData();
	fd.append("field","var1");
        fd.append("file", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "upload.php");
		//xhr.setRequestHeader("Content-type","multipart/form-data");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        alert(evt.target.responseText);
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
    </script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
      <label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="file" id="fileToUpload" onchange="fileSelected();"/>
    </div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
    </div>
<div id="progressNumber"></div>
</form>
</body>
</html>

This entry was posted in Functions, HTML, JS, Note, XML By Weil Jimmer.

About Weil Jimmer

avatar

Hi! Everyone! My name is Weil Jimmer. This is my personal blog. I'm a webmaster of this site. I hope the site will be popular. Now, Let's go! Enjoy gaining more knowledge.
More Details About Me : https://weils.net/profile.php

Leave a Reply

Name*:

Email*:

Website:

Privacy:   

Comment*:

Visitor Count

pop
nonenonenone

Note

重啟核四,關閉維修火力發電廠,減少空氣汙染,以核能養綠能。

支持網路中立性.
Support Net Neutrality.

Celebration for General Data Protection Regulation.

隨時注意自己的CPU使用狀態,有不少網站會沒有徵求同意就用您的電腦挖礦。

不用 Line 改用 Telegram。跟上最新潮流。

支持臺灣實施無條件基本收入

今天是世界糧食日。

Words Quiz


Search

Music

Counter

2237
天前是本網站的生日

Republic Of China
The strong do what they can and the weak suffer what they must.

Privacy is your right and ability to be yourself and express yourself without the fear that someone is looking over your shoulder and that you might be punished for being yourself, whatever that may be.

It is quality rather than quantity that matters.

I WANT Internet Freedom.

Reality made most of people lost their childishness.

Justice,Freedom,Knowledge.

Support/Donate

This site also need a little money to maintain operations, not entirely without any cost in the Internet. Your donations will be the best support and power of the site.
MethodBitcoin Address
bitcoin1NRMVGGpm2T1pmeejisLSEhCXfCefEW9V4
paypal
Register in linode via invitation link and stay active for three months.Linode

The Lie We Live

The Lie We Live

The Questions We Never Ask

The Questions We Never Ask

Support The Zeitgeist Movement

The Zeitgeist Movement

Man

Man

In The Fall

In The Fall

Facebook is EATING the Internet

Facebook

Categories

Android (7)

Announcement (4)

Arduino (2)

Bash (2)

C (3)

C# (5)

C++ (1)

Experience (42)

Flash (2)

Free (13)

Functions (36)

Games (13)

General (50)

HTML (7)

Java (13)

JS (7)

Mood (24)

Note (28)

Office (1)

PHP (9)

Privacy (4)

Product (12)

Python (4)

Software (11)

The Internet (16)

Tools (14)

VB.NET (8)

WebHosting (7)

Wi-Fi (5)

XML (4)