程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> ajax php文件上傳代碼

ajax php文件上傳代碼

編輯:關於PHP編程

ajax php教程文件上傳代碼
<!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" />

<style>
#container {
 margin: auto;
 width: 400px;
 border-top-width: 0px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #000033;
 border-right-color: #000033;
 border-bottom-color: #000033;
 border-left-color: #000033;
 background-color: #ffffff;
}
#container #header #header_left {
 float: left;
 background-image: url(images/header_left.gif);
 background-repeat: no-repeat;
 height: 42px;
 width: 45px;
}
#container #header #header_right {
 background-image: url(images/header_right.gif);
 background-repeat: no-repeat;
 height: 42px;
 width: 6px;
 float: right;
}
body {
 padding-top: 30px;
 background-color: #cccccc;
}
#container #content {
 padding: 5px;
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 font-weight: normal;
 color: #666666;
}
#container #footer {
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 color: #999999;
 text-align: right;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-top-color: #999999;
 border-right-color: #000033;
 border-bottom-color: #000033;
 border-left-color: #000033;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 5px;
}
#container #footer a {
 color: #999999;
 text-decoration: none;
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 10px;
}

#container #header #header_main {
 float: left;
 padding: 5px;
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #ffffff;
 margin-top: 5px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
}
.sbtn    {
 background-image: url(images/button.gif);
 border: 1px solid #000033;
 height: 22px;
 width: 82px;
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 color: #ffffff;
 font-weight: bold;
 background-position: center;
 padding: 0px;
 margin-top: 20px;
 margin-right: 20px;
 margin-bottom: 0px;
 margin-left: 20px;
}
button {
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #ffffff;
 height: 22px;
 width: 82px;
 background-image: url(images/button.gif);
}
#container #content #form1 legend {
 padding: 5px;
 margin: auto;
}
form {
 margin: 10px 5px 0px 5px;
}

 


#container #header {
 padding: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 background-image: url(images/header_bg.gif);
 background-repeat: repeat-x;
 height: 42px;
}
label {
 padding: 0px;
 text-align: center;
}

.msg {
 text-align:left;
  color:#666;
 background-repeat: no-repeat;
  margin-left:30px;
   margin-right:30px;
 padding:5px;
   padding-left:30px;
}

.emsg {
 text-align:left;
 margin-left:30px;
   margin-right:30px;
 color:#666;
 background-repeat: no-repeat;
 padding:5px;
   padding-left:30px;
}

#loader{
   visibility:hidden;
}

#f1_upload_form{
   height:100px;
}

#f1_error{
   font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
   font-weight:bold;
   color:#ff0000;
}

#f1_ok{
   font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
   font-weight:bold;
   color:#00ff00;

}

#f1_upload_form {
 font-family: geneva, arial, helvetica, sans-serif;
 font-size: 12px;
 font-weight: normal;
 color: #666666;
}

#f1_upload_process{
   z-index:100;
   visibility:hidden;
   position:absolute;
   text-align:center;
   width:400px;
}
</style>
  
<script language="網頁特效" type="text/javascript">
<!--
function startupload(){
      document.getelementbyid('f1_upload_process').style.visibility = 'visible';
      document.getelementbyid('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopupload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">the file was uploaded successfully!</span><br/><br/>';
      }
      else {
         result = '<span class="emsg">there was an error during file upload!</span><br/><br/>';
      }
      document.getelementbyid('f1_upload_process').style.visibility = 'hidden';
      document.getelementbyid('f1_upload_form').innerhtml = result + '<label>file: <input name="myfile" type="file" size="30" /></label><label><input type="submit" name="submitbtn" class="sbtn" value="upload" /></label>';
      document.getelementbyid('f1_upload_form').style.visibility = 'visible';     
      return true;  
}
//-->
</script>  
</head>

<body>
       <div id="container">
            <div id="header"><div id="header_left"></div>
            <div id="header_main">max's ajax file uploader</div><div id="header_right"></div></div>
            <div id="content">
                <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startupload();" >
                     <p id="f1_upload_process">loading...<br/><img src="loader.gif" /><br/></p>
                     <p id="f1_upload_form" align="center"><br/>
                         <label>file: 
                              <input name="myfile" type="file" size="30" />
                         </label>
                         <label>
                             <input type="submit" name="submitbtn" class="sbtn" value="upload" />
                         </label>
                     </p>
                    
                     <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
                 </form>
             </div>

         </div>
     
</body>  

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved