The following is the course notes for the intermediate class
URL: www. zixue. it
Run in chrome, ff, and IE10
Html page
[Html]
<! DOCTYPE html>
<Html lang = "zh-CN">
<Head>
<Title> HTML5 File Upload progress bar </title>
<Meta charset = "UTF-8"/>
<Meta name = "description" content = ""/>
<Meta name = "keywords" content = ""/>
<Script type = "text/javascript">
/*
Expected progress bar for transferring files
1: to package the file content and send the FormData object
2: During the sending process, you must continuously check the sent/all progress. onprogress
*/
</Script>
<Style type = "text/css">
# Progress {
Border: 1px solid blue;
Width: 500px;
Height: 20px;
}
# Bar {
Background: green;
Height: 20px;
Width: 0%;
}
</Style>
</Head>
<Body>
<H1> run in chrome, ff, and IE10 <Form>
<Input type = "file" name = "pic"/> <br/>
</Form>
<Div id = "progress"> <div id = "bar"> </div>
</Body>
<Script>
// Sends data through ajax.
Function up (fd ){
Var xhr = new XMLHttpRequest ();
Xhr. open ('post', 'upfile. php', true); // asynchronous transmission
// Xhr. upload this is a new html5 api that stores information during the upload process.
Xhr. upload. onprogress = function (ev ){
Var percent = 0;
If (ev. lengthComputable ){
Percent = 100 * ev. loaded/ev. total;
// Document. getElementById ('progress'). innerHTML = percent;
Document. getElementById ('bar'). style. width = percent + '% ';
}
}
Xhr. send (fd );
}
Document. getElementsByTagName ('input') [0]. onchange = function (){
// Alert ('selected File ');
// Alert (this. files [0]); // file object, new api of html5
Var fd = new FormData (); // newly added html5 object, which can wrap characters and binary information
Fd. append (this. name, this. files [0]);
Up (fd );
}
</Script>
</Html>
<! DOCTYPE html>
<Html lang = "zh-CN">
<Head>
<Title> HTML5 File Upload progress bar </title>
<Meta charset = "UTF-8"/>
<Meta name = "description" content = ""/>
<Meta name = "keywords" content = ""/>
<Script type = "text/javascript">
/*
Expected progress bar for transferring files
1: to package the file content and send the FormData object
2: During the sending process, you must continuously check the sent/all progress. onprogress
*/
</Script>
<Style type = "text/css">
# Progress {
Border: 1px solid blue;
Width: 500px;
Height: 20px;
}
# Bar {
Background: green;
Height: 20px;
Width: 0%;
}
</Style>
</Head>
<Body>
<H1> run in chrome, ff, and IE10 <Form>
<Input type = "file" name = "pic"/> <br/>
</Form>
<Div id = "progress"> <div id = "bar"> </div>
</Body>
<Script>
// Sends data through ajax.
Function up (fd ){
Var xhr = new XMLHttpRequest ();
Xhr. open ('post', 'upfile. php', true); // asynchronous transmission
// Xhr. upload this is a new html5 api that stores information during the upload process.
Xhr. upload. onprogress = function (ev ){
Var percent = 0;
If (ev. lengthComputable ){
Percent = 100 * ev. loaded/ev. total;
// Document. getElementById ('progress'). innerHTML = percent;
Document. getElementById ('bar'). style. width = percent + '% ';
}
}
Xhr. send (fd );
}
Document. getElementsByTagName ('input') [0]. onchange = function (){
// Alert ('selected File ');
// Alert (this. files [0]); // file object, new api of html5
Var fd = new FormData (); // newly added html5 object, which can wrap characters and binary information
Fd. append (this. name, this. files [0]);
Up (fd );
}
</Script>
</Html>
Upfile. php page
[Php]
Echo move_uploaded_file ($ _ FILES ['pic '] ['tmp _ name'],'. /upload /'. $ _ FILES ['pic '] ['name'])? 'OK': 'fail ';
Echo move_uploaded_file ($ _ FILES ['pic '] ['tmp _ name'],'. /upload /'. $ _ FILES ['pic '] ['name'])? 'OK': 'fail ';
:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
