Copy codeThe Code is as follows:
<? Php
If ($ _ FILES ){
?>
<Script>
Window. parent. ajaxUploadPicture. uploadCallback ('HTTP: // callback ');
</Script>
<? Php
Die;
}
?>
<! DOCTYPE html>
<Html>
<Head>
<Script>
AjaxUploadPicture = {$ o1 :''};
AjaxUploadPicture. ajaxUploadFile = function ($ o ){
This. $ o1 = $ o;
Var $ iframe = document. createElement ('iframe ');
$ Iframe. style. display = 'none ';
$ Iframe. name = 'iframe ';
$ Iframe. id = 'iframe ';
Document. body. appendChild ($ iframe );
Var $ form = document. createElement ("form ");
$ Form. method = "post ";
$ Form. enctype = "multipart/form-data ";
$ Form. action = "";
Required form.tar get = 'iframe ';
$ NewO = $ o. cloneNode ();
$ Form. appendChild ($ newO );
$ Form. submit ();
}
AjaxUploadPicture. uploadCallback = function ($ url ){
$ Pic = document. createElement ('img ');
$ Pic. width = "200 ";
$ Pic. height = "150 ";
$ Pic. src = $ url;
If (document. getElementById ('picshow') = null ){
$ Div = document. createElement ("div ");
$ Div. id = 'picshow ';
This. $ o1.parentNode. insertBefore ($ div, this. $ o1.nextSibling );
} Else {
$ Div = document. getElementById ('picshow ');
}
$ Div. innerHTML = '';
$ Div. appendChild ($ pic );
};
</Script>
</Head>
<Body>
<Input type = "file" name = "file" onchange = "ajaxUploadPicture. ajaxUploadFile (this);">
</Body>
</Html>
The object-oriented idea is that form is submitted to a hidden iframe and the callback js function is executed. Enable image echo. The backend php functions are not complete.