[伪·Ajax]无刷新上传原理

| No Comments | No TrackBacks
首先,Ajax是JavaScript-Based, 决定运行于浏览器中的它基本没法操作独立本地文件, 之所以说是伪·Ajax,因为是利用iframe来实现无刷新上传的。
无刷新的本质是在原先的Form中插入一个不可见的iFrame, 并且把原Form增加一个Target="$iFrame->Name && id", 通过操作这个iFrame来实现整体的面刷新, 并通过返回给iFrame的值来操作父级对象实现callback操作。
下面是关键代码
Head区的Javascript
<script language="javascript" 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>


相关的html代码
<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>


处理的upload.php的功能代码
<?php
   // handle FileUpload Issues
    bla~bla~bla~
   if($UPLOAD_ALLOK == TRUE) {
      $result = 1;
   }
?>
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>

最终还是回归了iFrame......哎, 自己来实现浏览器的Form操作的想法实在是太可耻了

示例及参考:
http://www.ajaxf1.com/demo/ajaxupload/

No TrackBacks

TrackBack URL: http://blog.suchasplus.com/mt/mt-tb.cgi/202

Leave a comment

无觅相关文章插件,快速提升流量