<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet=utf-8> <Head> <title>Ajax File Upload ~ ~</title> </Head> <Script>window.onload=function(){ varform=document.getElementsByTagName ('form')[0]; Form.onsubmit=function(){ variframe=Document.createelement ('iframe'); IFRAME.SRC='do_upload.php'; varIframe_name="iframe"+math.random (); Iframe.name=iframe_name; Document.body.appendChild (iframe); Iframe.style.width='0px'; Iframe.style.height='0px'; Iframe.frameborder='0'; Form.target=Iframe_name;} } </Script> <Body> <formenctype= ' Multipart/form-data 'Method= ' Post 'Action= ' do_upload.php '>Please select a file:<inputtype= ' file 'name= ' MyFile '/><BR/> <inputtype= ' Submit '/> <DivID= ' msg '></Div> </form> </Body> </HTML>
PHP section
<?PHP$up _file=$_files[' MyFile ']; if($up _file[' Error ']===0){ if(!file_exists('./imgs ')){ mkdir('./imgs '); } $save _name=Rand().$up _file[' Name ']; $bool=Move_uploaded_file($up _file[' Tmp_name '], "./imgs/$save _name"); if($bool){ $msg= ' Upload successful! '; }Else{ $msg= ' Upload failed! '; } } Echo"<script> var msg=parent.document.getelementbyid (' msg '); msg.innerhtml= ' <font color=red>$msg</forn> '; </script>"; ?>
IFRAME implementation Ajax File Upload effect example