资讯频道 → 编程语言
阅读更多

15顶
0踩

编程语言

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

2008-06-17 15:02 by 副主编 QQbyte 评论(2) 有7810人浏览
Gmail

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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


为了模仿动态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>


于是你的界面文件包含这个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>


你可以在这里下载所有的源文件：http://www.sajithmr.com/wp-content/uploads/2007/11/file-upload-like-gmail.rar
来自: dzone.com
15
顶
0
踩
评论 共 2 条 请登录后发表评论
2 楼 skyin 2008-06-18 11:58
我经常这样做
1 楼 ryuluck 2008-06-18 11:30
这个方法在项目中使用过

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 基于Java的动画编程基础

    出处:Java-cn基本技术: 　　在Java中实现动画有很多种办法,但它们实现的基本原理是一样的,即在屏幕上画出一系列的帧来造成运动的感觉。 　　我们先构造一个程序的框架,再慢慢扩展,使之功能比较齐备。 　　使用线程：         为了每秒中多次更新屏幕,必须创建一个线程来实现动画的循环,这个循环要跟踪当前帧并响应周期性的屏幕更新要求。实现线程的方法有两种,你可以创建一个类T

  • 配置weblogic连接池连接DM数据库

    在如下环境配置weblogic连接池连接DM数据库： 操作系统 win10系统 数据库版本 DM8 weblogic版本 weblogic14.4 具体步骤如下： 步骤1：安装jdk，安装完成后配置环境变量path，新建JAVA_HOME，新建...

  • Linux下weblogic11g建域,WebLogic11g-创建域（Domain）及基本配置

    最近看到经常有人提问weblogic相关问题，所以闲暇之际写几篇博文(基于weblogic11)，仅供大家参考。具体weblogic的介绍以及安装，这里就不赘述了。以域的创建开篇，虽然简单，但是细节很多。步骤如下：1、创建域...

  • weblogic 配置 cas 详细全过程。

     weblogic (10.3.1)这是我的环境。高一点好象没什么。低过这个我就不保证了  jdk 1.6  myeclipse 6.0我用的这个  openSSL 这个就下最新版本 版本无所谓  ------------------- cas 版本server 3.3.1 高过这...

  • weblogic12c下载及安装

    下载地址:http://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html

  • WebLogic11g-创建域(Domain)及基本配置

    转：...最近看到经常有人提问weblogic相关问题，所以闲暇之际写几篇博文（基于weblogic11），仅供大家参考。 具体weblogic的介绍以及...

  • weblogic上cas的安装步骤

    在WebLogic的安装目录下建立目录“ca”； 2.  启动cmd到WebLogic安装目录下;生成根私匙cakey.pem:openssl genrsa -out ca/cakey.pem 512;   图 3.1‑2 生成根私钥 3.  生成根证书请求careq.csr：openssl req ...

  • java程序员面试时候经常会问的一些问题_面试JAVA程序员常遇到的一些问题了解一下...

    每当我们去面试的时候，面试官总会问我们一大堆问题，而回答问题都是有技巧，回答问题的时候不能过于老实，全盘脱出，稍微夸大或者隐瞒是没什么问题，但不能过度。因为最重要的还是靠自身的实力，作为JAVA程序员来说...

  • Weblogic 10.3.3 的 SNMP 默认绑定到本地主机127.0.0.1的BUG解决方法

    提问 我在两台服务器中监视 SNMP 的 Weblogic。所有的服务器都是太阳能的。其中一个是 V12.1.1,另一个是 V10.3.3。V12.1.1 中的 SNMP 正常,但在 V10.3.3 中不起作用。 当我使用 ip 地址作为 snmpwalk 的参数来监视 ...

  • Java就业面试问题大全

    Java就业面试问题汇总

  • 异常java.lang.ClassCastException: weblogic.jdbc.wrapper.Blob_oracle_sql_BLOB cannot be cast to oracle.

    异常java.lang.ClassCastException: weblogic.jdbc.wrapper.Blob_oracle_sql_BLOB cannot be cast to oracle.sql.BLOB。

  • WebLogic11g-创建域（Domain）LInux与Windows平台通用

    最近看到经常有人提问weblogic相关问题，所以闲暇之际写几篇博文（基于weblogic11），仅供大家参考。 具体weblogic的介绍以及安装，这里就不赘述了。 以域的创建开篇，虽然简单，但是细节很多。步骤如下： 1、...

  • WebLogic11g-创建域（Domain）

    最近看到经常有人提问weblogic相关问题，所以闲暇之际写几篇博文（基于weblogic11），仅供大家参考。  具体weblogic的介绍以及安装，这里就不赘述了。 以域的创建开篇，虽然简单，但是细节很多。步骤如下：  ...

  • 系统架构性能问题诊断及优化思路

    应用中间件性能分析和调优 应用中间件容器即我们常说的Weblogic, Tomcat等应用中间件容器或Web容器。应用中间件调优一个方面是本身的配置参数优化设置，一个方面就是JVM内存启动参数调优。 对于应用中间件本身的...

  • mybatis配置双数据(springboot集成mybatis的配置)

    你好，提问者 没大明白你说的两个不同类型的参数是指的什么意思啊…… -//mybatis.org//DTDMapper3.0//EN" 在mybatis中的配置就是，数据库跟实体字段中的对应啊！ Spring+Mybatis配置了2个数据源，如何知道sql执...

  • 原生js图片圆形排列按钮控制3D旋转切换插件.zip

    原生js图片圆形排列按钮控制3D旋转切换插件.zip

  • 类似c++数组的python包

    内含二维数组与三维数组,分别为list2nd,list3rd

  • 原生js颜色随机生成9x9乘法表代码.zip

    原生js颜色随机生成9x9乘法表代码.zip

  • 原生js实现图片叠加滚动切换代码.zip

    原生js实现图片叠加滚动切换代码.zip

  • 【Academic tailor】学术小裁缝必备知识点：全局注意力机制（GAM）TensorFlow

    【Academic tailor】学术小裁缝必备知识点：全局注意力机制（GAM） 注意力机制是深度学习中的重要技术，尤其在序列到序列（sequence-to-sequence）任务中广泛应用，例如机器翻译、文本摘要和问答系统等。这一机制由 Bahdanau 等人在其论文《Neural Machine Translation by Jointly Learning to Align and Translate》中首次提出。以下将详细介绍这一机制的背景、核心原理及相关公式。 全局注意力机制（Global Attention Mechanism, GAM）由 《Global Attention Mechanism: Retain Information to Enhance Channel-Spatial Interactions》提出，是一篇针对计算机视觉任务提出的方法。这篇文章聚焦于增强深度神经网络中通道和空间维度之间的交互，以提高分类任务的性能。与最早由 Bahdanau 等人提出的用于序列到序列任务的注意力机制 不同，这篇文章的重点是针对图像分类任务，并未专注于序

Global site tag (gtag.js) - Google Analytics