Recently I have written many things that have been written by others.
Html
View 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> untitled document </title>
</Head>
<Body>
<Form ID = "j_myuploadform" Action = "" method = "Post" enctype = "multipart/form-Data">
<Input type = "file" name = "filefield" id = "filefield"/>
</Form>
<Input type = "button" value = "ajaxfileupload" id = "BTN"/>
<SCRIPT src = "ajaxfileupload. js"> </SCRIPT>
<SCRIPT>
VaR BTN = Document. getelementbyid ('btn ');
BTN. onclick = function (){
Ajaxfileupload ({
ID: 'filefield ',
Callback: function (){
VaR src = This. responsetext;
VaR IMG = Document. createelement ('img ');
IMG. src = SRC;
Document. Body. appendchild (IMG );
}
});
}
</SCRIPT>
</Body>
</Html>
PHP
View code<?php
move_uploaded_file($_FILES["fileField"]["tmp_name"], "upload/" . $_FILES["fileField"]["name"]);
echo "upload/" . $_FILES["fileField"]["name"];
?>
JS
/*
Author: Tianya
QQ: 63886829
Email: flyinksy@gmail.com
(Ajax File Upload)
*/
VaR ajaxfileupload = function (OPTs ){
Return new ajaxfileupload. Prototype. INIT (OPTs );
};
Ajaxfileupload. Prototype = {
Init: function (OPTs ){
VaR set = This. Extend ({
URL: 'result. php ',
ID: 'fileid ',
Callback: function (){}
}, Opts | {});
VaR _ this = this;
VaR id = + new date ();
VaR form = This. createform (ID), frame = This. createiframe (ID, set. url );
VaR oldfile = Document. getelementbyid (set. ID)
VaR newfile = oldfile. clonenode (true );
VaR fileid = 'ajaxfileuploadfile' + ID;
Oldfile. setattribute ('id', fileid );
Oldfile. parentnode. insertbefore (newfile, oldfile );
Form. appendchild (oldfile); // pay attention to browser security issues. Place the original file domain in the created form and submit it.
Form. setattribute ('target', frame. ID); // set the target of form to IFRAME, so that the content returned after submission is in IFRAME
Form. setattribute ('action', set. url );
SetTimeout (function (){
Form. Submit ();
If (frame. attachevent ){
Frame. attachevent ('onload', function () {_ this. uploadcallback (ID, set. Callback );});
} Else {
Frame. onload = function () {_ this. uploadcallback (ID, set. Callback );}
}
},100 );
},
/*
Creating IFRAME, IE7, and 6 is a pain point and must be created as follows. Otherwise
*/
Createiframe: function (ID, URL ){
VaR frameid = 'ajaxfileuploadframe '+ id, IFRAME;
VaR Ie =/MSIE (\ D ++ \.) + \ D +)/I. Test (navigator. useragent )? (Document.doc umentmode | Regexp ['\ x241']): false,
Url = URL | 'javascript: false ';
If (ie & ie <8 ){
IFRAME = Document. createelement ('<IFRAME id = "' + frameid + '" name = "' + frameid + '"/> ');
IFRAME. src = URL;
} Else {
IFRAME = Document. createelement ('iframe ');
This. ATTR (IFRAME ,{
'Id': frameid,
'Name': frameid,
'Src': URL
});
};
Iframe.style.css text = 'position: absolute; top:-9999px; left:-9999px ';
Return document. Body. appendchild (IFRAME );
},
/*
Create form
*/
Createform: function (ID ){
VaR formid = 'ajaxfileuploadform '+ ID;
VaR form = Document. createelement ('form ');
This. ATTR (Form ,{
'Action ':'',
'Method': 'post ',
'Name': formid,
'Id': formid,
'Enabledype ': 'multipart/form-data ',
'Encoding': 'multipart/form-data'
});
Form.style.css text = 'position: absolute; top:-9999px; left:-9999px ';
Return document. Body. appendchild (form );
},
/*
Get the IFRAME content, execute the callback function, and remove the generated IFRAME and form
*/
Uploadcallback: function (ID, callback ){
VaR frame = Document. getelementbyid ('ajaxfileuploadframework' + id), form = Document. getelementbyid ('ajaxfileuploadform' + id); Data = {};
VaR DB = Document. Body;
Try {
If (frame. contentWindow ){
Data. responsetext = frame.contentdomaindoc ument. Body? Frame.contentdomaindoc ument. Body. innerhtml: NULL;
Data. responsexml = frame.contentdomaindoc ument. xmldocument? Frame.contentcontactdoc ument. xmldocument: frame.contentcontactdoc ument;
} Else {
Data. responsetext = frame.contentdocument.doc ument. Body? Frame.contentdocument.doc ument. Body. innerhtml: NULL;
Data. responsexml = frame.contentdocument.doc ument. xmldocument? Frame.contentdocument.doc ument. xmldocument: frame.contentdocument.doc ument;
}
} Catch (e ){};
Callback & callback. Call (data );
SetTimeout (function (){
DB. removechild (FRAME );
DB. removechild (form );
},100 );
},
ATTR: function (El, attrs ){
For (VAR prop in attrs) El. setattribute (prop, attrs [prop]);
Return El;
},
Extend: function (target, source ){
For (VAR prop in source) target [prop] = source [prop];
Return target;
}
};
Ajaxfileupload. Prototype. init. Prototype = ajaxfileupload. Prototype;
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
