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

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

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

这是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

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

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

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

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



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




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



<?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来上传文件 



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



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




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



<?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来上传文件 



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



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




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



<?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来上传文件 



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



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




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



<?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来上传文件 



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



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




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



<?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来上传文件 



<?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来上传文件

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