ajax php檔案上傳代碼

來源:互聯網
上載者:User

<!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>  

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.