The following is the course notes for the intermediate class
Html page
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-CN">
<Head>
<Title> ajax upload using jquery + iframe </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "description" content = ""/>
<Meta name = "keywords" content = ""/>
<Script src = "http://libs.baidu.com/jquery/1.8.2/jquery.min.js"> </script>
<Script type = "text/javascript">
// Use jquery + iframe for ajax upload
/*
Ideas:
1: click "Submit" to generate an iframe object and insert it into the body.
2: Modify the target of form to the name value of iframe.
3: add an event to iframe, onload
*/
$ (
Function (){
$ ('Input: click'). click (function (){
// Alert ('s ');
Var ifmname = 'ifm' + Math. random ();
Var ifm = $ ('<iframe width = "0" height = "0" frameborder = "0" name = "' + ifmname + '"> ');
Ifm. appendTo ($ ('body '));
$ ('Form'). attr ('target', ifmname );
$ ('Form'). submit ();
('{Ssss'{.html (' ');
Ifm. load (function (){
Upload ('upload ssss'0000.html ('upload finished ');
This. remove ();
});
});
}
);
</Script>
<Style type = "text/css">
</Style>
</Head>
<Body>
<Div id = "progress"> </div>
<Form action = "upfile. php" method = "post" enctype = "multipart/form-data" target = "upfile">
<Input type = "file" name = "pic"/> <br/>
<Input type = "button" value = "Submit"/>
</Form>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-CN">
<Head>
<Title> ajax upload using jquery + iframe </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "description" content = ""/>
<Meta name = "keywords" content = ""/>
<Script src = "http://libs.baidu.com/jquery/1.8.2/jquery.min.js"> </script>
<Script type = "text/javascript">
// Use jquery + iframe for ajax upload
/*
Ideas:
1: click "Submit" to generate an iframe object and insert it into the body.
2: Modify the target of form to the name value of iframe.
3: add an event to iframe, onload
*/
$ (
Function (){
$ ('Input: click'). click (function (){
// Alert ('s ');
Var ifmname = 'ifm' + Math. random ();
Var ifm = $ ('<iframe width = "0" height = "0" frameborder = "0" name = "' + ifmname + '"> ');
Ifm. appendTo ($ ('body '));
$ ('Form'). attr ('target', ifmname );
$ ('Form'). submit ();
('{Ssss'{.html (' ');
Ifm. load (function (){
Upload ('upload ssss'0000.html ('upload finished ');
This. remove ();
});
});
}
);
</Script>
<Style type = "text/css">
</Style>
</Head>
<Body>
<Div id = "progress"> </div>
<Form action = "upfile. php" method = "post" enctype = "multipart/form-data" target = "upfile">
<Input type = "file" name = "pic"/> <br/>
<Input type = "button" value = "Submit"/>
</Form>
</Body>
</Html>
Upfile. php
[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 ';