Gmail客户端详细架构之二：象Gmail一样上传文件

这是Gmail客户端详细架构系列的第二篇，第一篇请看： Gmail客户端详细架构之一

这一篇文章中我们将看看gmail是如何在emal中上传文件的。到处都是AJAX，AJAX能够带来良好的用户体验，尤其能预先完成用户准备执行的动作。

Gmail上传文件提供给我们很多证据，证明使用AJAX和iframes是web 2.0应用不可避免的。Gmail是最先进的web应用之一，让古老的在线email服务焕发的新生。

上面是Gmail的创建新邮件界面。

当你选择好了你的email需要附带的文件，然后开始写email正文，当你的email还没有完成，gmail的文件上传已经结束了，这是怎样实现的呢？

首先这不是使用你常用的multipart/form-data AJAX模式，Gmail使用了iframe来上传附件，它通过代码：style=”display:none” 隐藏了这个iframe

Js代码

<form target="iframename" action="upload.php">

<form target="iframename" action="upload.php">

为了模仿动态AJAX效果更新你的界面，在upload.php文件最后部分添加了JavaScript

Js代码

<?php
$target_path = "upload/";
$target_path = $target_path . basename( $_FILES['filefieldname']['name']);
if(move_uploaded_file($_FILES['filefieldname']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}?>
<script>
parent.document.getElementById('uploadedfile').innerHTML += '
<a href="upload/<?php echo $_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] ?></a>';
</script>

<?php
$target_path = "upload/";
$target_path = $target_path . basename(

     
     
     
     
      
      
      
      这是Gmail客户端详细架构系列的第二篇，第一篇请看：
      Gmail客户端详细架构之一 
      
      
      
      


      
      
      
      

这一篇文章中我们将看看gmail是如何在emal中上传文件的。到处都是AJAX，AJAX能够带来良好的用户体验，尤其能预先完成用户准备执行的动作。 
      
      
      
      


      
      
      
      

Gmail上传文件提供给我们很多证据，证明使用AJAX和iframes是web 2.0应用不可避免的。Gmail是最先进的web应用之一，让古老的在线email服务焕发的新生。 
      
      
      
      


      
      
      
      


      
      
      
       
      
      
      
      


      
      
      
      

上面是Gmail的创建新邮件界面。 
      
      
      
      


      
      
      
      

当你选择好了你的email需要附带的文件，然后开始写email正文，当你的email还没有完成，gmail的文件上传已经结束了，这是怎样实现的呢？ 
      
      
      
      


      
      
      
      

首先这不是使用你常用的multipart/form-data AJAX模式，Gmail使用了iframe来上传附件，它通过代码：style=”display:none” 隐藏了这个iframe 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <form target="iframename" action="upload.php">     
        
      

      
      
      
      <form target="iframename" action="upload.php"> 

      
      
      
      


      
      
      
      

为了模仿动态AJAX效果更新你的界面，在upload.php文件最后部分添加了JavaScript 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        $target_path = "upload/";     
            
        $target_path = $target_path . basename( $_FILES['filefieldname']['name']);      
            
        if(move_uploaded_file($_FILES['filefieldname']['tmp_name'], $target_path)) {     
            echo "The file ".  basename( $_FILES['uploadedfile']['name']).      
            " has been uploaded";     
        } else{     
            echo "There was an error uploading the file, please try again!";     
        }?>     
        <script>     
        parent.document.getElementById('uploadedfile').innerHTML += '     
        <a href="upload/<?php echo $_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] ?></a>';     
        </script>    
        
      

      
      
      
      ___FCKpd___1

      
      
      
      


      
      
      
      

于是你的界面文件包含这个iframe，并且用upload.php来上传文件 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        <form  target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">     
        <p>     
          <label>To:     
          <input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />     
            
          Subject:       
          <input name="textfield" type="text" id="textfield" size="60" maxlength="60" />     
            
          Attach File:     
          <input type="file" name="filefieldname" id="fileField"   onchange="document.uploadform.submit()"/>     
          </label>     
        </p>     
        <p id="uploadedfile" >     
          <label></label>     
        </p>     
        <p>     
          <label>     
          <input type="submit" name="button" id="button" value="Submit" />     
          </label>     
        </p>     
        <iframe name="hiddenframe" style="display:none" >Loading...</iframe>     
        </form>    
        
      

      
      
      
      <?php
<form  target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">
<p>
<label>To:
<input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />
Subject:
<input name="textfield" type="text" id="textfield" size="60" maxlength="60" />
Attach File:
<input type="file" name="filefieldname" id="fileField"   onchange="document.uploadform.submit()"/>
</label>
</p>
<p id="uploadedfile" >
<label></label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
<iframe name="hiddenframe" style="display:none" >Loading...</iframe>
</form>

      
      
      
      


      
      
      
      

你可以在这里下载所有的源文件：
      http://www.sajithmr.com/wp-content/uploads/2007/11/file-upload-like-gmail.rar
     
     
     
     


参考：Upload Files Like Gmail

原文：dzone.com

来自：http://www.javaeye.com/news/2608
FILES['filefieldname']['name']);
if(move_uploaded_file(

     
     
     
     
      
      
      
      这是Gmail客户端详细架构系列的第二篇，第一篇请看：
      Gmail客户端详细架构之一 
      
      
      
      


      
      
      
      

这一篇文章中我们将看看gmail是如何在emal中上传文件的。到处都是AJAX，AJAX能够带来良好的用户体验，尤其能预先完成用户准备执行的动作。 
      
      
      
      


      
      
      
      

Gmail上传文件提供给我们很多证据，证明使用AJAX和iframes是web 2.0应用不可避免的。Gmail是最先进的web应用之一，让古老的在线email服务焕发的新生。 
      
      
      
      


      
      
      
      


      
      
      
       
      
      
      
      


      
      
      
      

上面是Gmail的创建新邮件界面。 
      
      
      
      


      
      
      
      

当你选择好了你的email需要附带的文件，然后开始写email正文，当你的email还没有完成，gmail的文件上传已经结束了，这是怎样实现的呢？ 
      
      
      
      


      
      
      
      

首先这不是使用你常用的multipart/form-data AJAX模式，Gmail使用了iframe来上传附件，它通过代码：style=”display:none” 隐藏了这个iframe 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <form target="iframename" action="upload.php">     
        
      

      
      
      
      <form target="iframename" action="upload.php"> 

      
      
      
      


      
      
      
      

为了模仿动态AJAX效果更新你的界面，在upload.php文件最后部分添加了JavaScript 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        $target_path = "upload/";     
            
        $target_path = $target_path . basename( $_FILES['filefieldname']['name']);      
            
        if(move_uploaded_file($_FILES['filefieldname']['tmp_name'], $target_path)) {     
            echo "The file ".  basename( $_FILES['uploadedfile']['name']).      
            " has been uploaded";     
        } else{     
            echo "There was an error uploading the file, please try again!";     
        }?>     
        <script>     
        parent.document.getElementById('uploadedfile').innerHTML += '     
        <a href="upload/<?php echo $_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] ?></a>';     
        </script>    
        
      

      
      
      
      ___FCKpd___1

      
      
      
      


      
      
      
      

于是你的界面文件包含这个iframe，并且用upload.php来上传文件 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        <form  target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">     
        <p>     
          <label>To:     
          <input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />     
            
          Subject:       
          <input name="textfield" type="text" id="textfield" size="60" maxlength="60" />     
            
          Attach File:     
          <input type="file" name="filefieldname" id="fileField"   onchange="document.uploadform.submit()"/>     
          </label>     
        </p>     
        <p id="uploadedfile" >     
          <label></label>     
        </p>     
        <p>     
          <label>     
          <input type="submit" name="button" id="button" value="Submit" />     
          </label>     
        </p>     
        <iframe name="hiddenframe" style="display:none" >Loading...</iframe>     
        </form>    
        
      

      
      
      
      ___FCKpd___2

      
      
      
      


      
      
      
      

你可以在这里下载所有的源文件：
      http://www.sajithmr.com/wp-content/uploads/2007/11/file-upload-like-gmail.rar
     
     
     
     


参考：Upload Files Like Gmail

原文：dzone.com

来自：http://www.javaeye.com/news/2608
FILES['filefieldname']['tmp_name'], $target_path)) {
echo "The file ".  basename(

     
     
     
     
      
      
      
      这是Gmail客户端详细架构系列的第二篇，第一篇请看：
      Gmail客户端详细架构之一 
      
      
      
      


      
      
      
      

这一篇文章中我们将看看gmail是如何在emal中上传文件的。到处都是AJAX，AJAX能够带来良好的用户体验，尤其能预先完成用户准备执行的动作。 
      
      
      
      


      
      
      
      

Gmail上传文件提供给我们很多证据，证明使用AJAX和iframes是web 2.0应用不可避免的。Gmail是最先进的web应用之一，让古老的在线email服务焕发的新生。 
      
      
      
      


      
      
      
      


      
      
      
       
      
      
      
      


      
      
      
      

上面是Gmail的创建新邮件界面。 
      
      
      
      


      
      
      
      

当你选择好了你的email需要附带的文件，然后开始写email正文，当你的email还没有完成，gmail的文件上传已经结束了，这是怎样实现的呢？ 
      
      
      
      


      
      
      
      

首先这不是使用你常用的multipart/form-data AJAX模式，Gmail使用了iframe来上传附件，它通过代码：style=”display:none” 隐藏了这个iframe 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <form target="iframename" action="upload.php">     
        
      

      
      
      
      <form target="iframename" action="upload.php"> 

      
      
      
      


      
      
      
      

为了模仿动态AJAX效果更新你的界面，在upload.php文件最后部分添加了JavaScript 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        $target_path = "upload/";     
            
        $target_path = $target_path . basename( $_FILES['filefieldname']['name']);      
            
        if(move_uploaded_file($_FILES['filefieldname']['tmp_name'], $target_path)) {     
            echo "The file ".  basename( $_FILES['uploadedfile']['name']).      
            " has been uploaded";     
        } else{     
            echo "There was an error uploading the file, please try again!";     
        }?>     
        <script>     
        parent.document.getElementById('uploadedfile').innerHTML += '     
        <a href="upload/<?php echo $_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] ?></a>';     
        </script>    
        
      

      
      
      
      ___FCKpd___1

      
      
      
      


      
      
      
      

于是你的界面文件包含这个iframe，并且用upload.php来上传文件 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        <form  target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">     
        <p>     
          <label>To:     
          <input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />     
            
          Subject:       
          <input name="textfield" type="text" id="textfield" size="60" maxlength="60" />     
            
          Attach File:     
          <input type="file" name="filefieldname" id="fileField"   onchange="document.uploadform.submit()"/>     
          </label>     
        </p>     
        <p id="uploadedfile" >     
          <label></label>     
        </p>     
        <p>     
          <label>     
          <input type="submit" name="button" id="button" value="Submit" />     
          </label>     
        </p>     
        <iframe name="hiddenframe" style="display:none" >Loading...</iframe>     
        </form>    
        
      

      
      
      
      ___FCKpd___2

      
      
      
      


      
      
      
      

你可以在这里下载所有的源文件：
      http://www.sajithmr.com/wp-content/uploads/2007/11/file-upload-like-gmail.rar
     
     
     
     


参考：Upload Files Like Gmail

原文：dzone.com

来自：http://www.javaeye.com/news/2608
FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}?>
<script>
parent.document.getElementById('uploadedfile').innerHTML += '
<a href="upload/<?php echo

     
     
     
     
      
      
      
      这是Gmail客户端详细架构系列的第二篇，第一篇请看：
      Gmail客户端详细架构之一 
      
      
      
      


      
      
      
      

这一篇文章中我们将看看gmail是如何在emal中上传文件的。到处都是AJAX，AJAX能够带来良好的用户体验，尤其能预先完成用户准备执行的动作。 
      
      
      
      


      
      
      
      

Gmail上传文件提供给我们很多证据，证明使用AJAX和iframes是web 2.0应用不可避免的。Gmail是最先进的web应用之一，让古老的在线email服务焕发的新生。 
      
      
      
      


      
      
      
      


      
      
      
       
      
      
      
      


      
      
      
      

上面是Gmail的创建新邮件界面。 
      
      
      
      


      
      
      
      

当你选择好了你的email需要附带的文件，然后开始写email正文，当你的email还没有完成，gmail的文件上传已经结束了，这是怎样实现的呢？ 
      
      
      
      


      
      
      
      

首先这不是使用你常用的multipart/form-data AJAX模式，Gmail使用了iframe来上传附件，它通过代码：style=”display:none” 隐藏了这个iframe 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <form target="iframename" action="upload.php">     
        
      

      
      
      
      <form target="iframename" action="upload.php"> 

      
      
      
      


      
      
      
      

为了模仿动态AJAX效果更新你的界面，在upload.php文件最后部分添加了JavaScript 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        $target_path = "upload/";     
            
        $target_path = $target_path . basename( $_FILES['filefieldname']['name']);      
            
        if(move_uploaded_file($_FILES['filefieldname']['tmp_name'], $target_path)) {     
            echo "The file ".  basename( $_FILES['uploadedfile']['name']).      
            " has been uploaded";     
        } else{     
            echo "There was an error uploading the file, please try again!";     
        }?>     
        <script>     
        parent.document.getElementById('uploadedfile').innerHTML += '     
        <a href="upload/<?php echo $_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] ?></a>';     
        </script>    
        
      

      
      
      
      ___FCKpd___1

      
      
      
      


      
      
      
      

于是你的界面文件包含这个iframe，并且用upload.php来上传文件 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        <form  target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">     
        <p>     
          <label>To:     
          <input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />     
            
          Subject:       
          <input name="textfield" type="text" id="textfield" size="60" maxlength="60" />     
            
          Attach File:     
          <input type="file" name="filefieldname" id="fileField"   onchange="document.uploadform.submit()"/>     
          </label>     
        </p>     
        <p id="uploadedfile" >     
          <label></label>     
        </p>     
        <p>     
          <label>     
          <input type="submit" name="button" id="button" value="Submit" />     
          </label>     
        </p>     
        <iframe name="hiddenframe" style="display:none" >Loading...</iframe>     
        </form>    
        
      

      
      
      
      ___FCKpd___2

      
      
      
      


      
      
      
      

你可以在这里下载所有的源文件：
      http://www.sajithmr.com/wp-content/uploads/2007/11/file-upload-like-gmail.rar
     
     
     
     


参考：Upload Files Like Gmail

原文：dzone.com

来自：http://www.javaeye.com/news/2608
FILES['filefieldname']['name'] ?>"><?php echo

     
     
     
     
      
      
      
      这是Gmail客户端详细架构系列的第二篇，第一篇请看：
      Gmail客户端详细架构之一 
      
      
      
      


      
      
      
      

这一篇文章中我们将看看gmail是如何在emal中上传文件的。到处都是AJAX，AJAX能够带来良好的用户体验，尤其能预先完成用户准备执行的动作。 
      
      
      
      


      
      
      
      

Gmail上传文件提供给我们很多证据，证明使用AJAX和iframes是web 2.0应用不可避免的。Gmail是最先进的web应用之一，让古老的在线email服务焕发的新生。 
      
      
      
      


      
      
      
      


      
      
      
       
      
      
      
      


      
      
      
      

上面是Gmail的创建新邮件界面。 
      
      
      
      


      
      
      
      

当你选择好了你的email需要附带的文件，然后开始写email正文，当你的email还没有完成，gmail的文件上传已经结束了，这是怎样实现的呢？ 
      
      
      
      


      
      
      
      

首先这不是使用你常用的multipart/form-data AJAX模式，Gmail使用了iframe来上传附件，它通过代码：style=”display:none” 隐藏了这个iframe 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <form target="iframename" action="upload.php">     
        
      

      
      
      
      <form target="iframename" action="upload.php"> 

      
      
      
      


      
      
      
      

为了模仿动态AJAX效果更新你的界面，在upload.php文件最后部分添加了JavaScript 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        $target_path = "upload/";     
            
        $target_path = $target_path . basename( $_FILES['filefieldname']['name']);      
            
        if(move_uploaded_file($_FILES['filefieldname']['tmp_name'], $target_path)) {     
            echo "The file ".  basename( $_FILES['uploadedfile']['name']).      
            " has been uploaded";     
        } else{     
            echo "There was an error uploading the file, please try again!";     
        }?>     
        <script>     
        parent.document.getElementById('uploadedfile').innerHTML += '     
        <a href="upload/<?php echo $_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] ?></a>';     
        </script>    
        
      

      
      
      
      ___FCKpd___1

      
      
      
      


      
      
      
      

于是你的界面文件包含这个iframe，并且用upload.php来上传文件 
      
      
      
      


      
      
      
      


      
      
      
       
        
        
          Js代码 
         
        
        
        <?php     
        <form  target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">     
        <p>     
          <label>To:     
          <input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />     
            
          Subject:       
          <input name="textfield" type="text" id="textfield" size="60" maxlength="60" />     
            
          Attach File:     
          <input type="file" name="filefieldname" id="fileField"   onchange="document.uploadform.submit()"/>     
          </label>     
        </p>     
        <p id="uploadedfile" >     
          <label></label>     
        </p>     
        <p>     
          <label>     
          <input type="submit" name="button" id="button" value="Submit" />     
          </label>     
        </p>     
        <iframe name="hiddenframe" style="display:none" >Loading...</iframe>     
        </form>    
        
      

      
      
      
      ___FCKpd___2

      
      
      
      


      
      
      
      

你可以在这里下载所有的源文件：
      http://www.sajithmr.com/wp-content/uploads/2007/11/file-upload-like-gmail.rar
     
     
     
     


参考：Upload Files Like Gmail

原文：dzone.com

来自：http://www.javaeye.com/news/2608
FILES['filefieldname']['name'] ?></a>';
</script>

于是你的界面文件包含这个iframe，并且用upload.php来上传文件

Js代码

<?php
<form target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">
<p>
<label>To:
<input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />
Subject:
<input name="textfield" type="text" id="textfield" size="60" maxlength="60" />
Attach File:
<input type="file" name="filefieldname" id="fileField" onchange="document.uploadform.submit()"/>
</label>
</p>
<p id="uploadedfile" >
<label></label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
<iframe name="hiddenframe" style="display:none" >Loading...</iframe>
</form>

___FCKpd___2

你可以在这里下载所有的源文件： http://www.sajithmr.com/wp-content/uploads/2007/11/file-upload-like-gmail.rar

参考：Upload Files Like Gmail
原文：dzone.com
来自：http://www.javaeye.com/news/2608

Gmail客户端详细架构之二：象Gmail一样上传文件

你可能感兴趣的:(Gmail客户端详细架构之二：象Gmail一样上传文件)