`
eclipse_spring
  • 浏览: 118330 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

仿126 GMail QQ添加附件的界面

阅读更多
所使用到的JavaScript代码如下:
var i = 0;  
function addAttachmentToList(){
 if (findAttachment(event.srcElement.value)) return;        
    var span = document.createElement('span');
    span.id = '_attachment' + i;
    span.innerHTML = extractFileName(event.srcElement.value) + '&nbsp;<a href="javascript:delAttachment(' + (i++) + ')"><font color="blue">删除</font></a><br/>';
    span.title = event.srcElement.value;
    G('attachmentList').appendChild(span);
    
    if (G('attachmentList').style.display == 'none')
    {
        G('btnAdd').value = '继续添加';
        G('attachmentList').style.display = '';
        G('btnClear').style.display = '';
    }

    G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个附件';
}

function selectAttachment()
{
    cleanInvalidUpfile();
    
    var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+i+'">';
    document.body.insertAdjacentHTML('beforeEnd', upfile);
    G('_upfile'+i).click();
}

function extractFileName(fn)
{
    return fn.substr(fn.lastIndexOf("\\") + 1);
}

function findAttachment(fn)
{
    var o = G('attachmentList').getElementsByTagName('span');
    for(var i=0;i<o.length;i++)
        if (o[i].title == fn) return true;
    return false;
}

function delAttachment(id)
{
    G('attachmentList').removeChild(G('_attachment'+id));
    document.body.removeChild(G('_upfile'+id));
    
    // 当附件列表为空则不显示并且变化添加附件按钮文本
    if (G('attachmentList').childNodes.length == 0)
    {
        G('btnAdd').value = '添加附件';
        G('attachmentList').style.display = 'none';
        G('btnClear').style.display = 'none';
    }
    
    G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个附件';    
}

function cleanInvalidUpfile()
{
    var o = document.body.getElementsByTagName('input');
    for(var i=o.length-1;i>=0;i--)
      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
     {
          if (!G('_attachment'+o[i].id.substr(7)))
              document.body.removeChild(o[i]);
      }
}

function clearAttachment()
{
    var o = G('attachmentList').childNodes;
    for(var i=o.length-1;i>=0;i--)
        G('attachmentList').removeChild(o[i]);

    o = document.body.getElementsByTagName('input');
    for(var i=o.length-1;i>=0;i--)
      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
      {
          document.body.removeChild(o[i]);
      }    

    G('btnAdd').value = '添加附件';
    G('attachmentList').style.display = 'none';
    G('btnClear').style.display = 'none';
    
    G('total').innerText = '当前选择上传0个附件';    
      
}

function G(id)
{
    return document.getElementById(id);
}


将以上代码在页面中引用:
<HTML>
<HEAD></HEAD>
<BODY>
<fieldset style="border : 1px solid #84A24A;text-align:left;COLOR:#84A24A;FONT-SIZE: 
12px;font-family: Verdana;padding:5px;">
<legend>模仿126 GMail QQ邮箱添加附件</legend>
<input type="button" value="添加附件" id="btnAdd" onclick="selectAttachment();">&nbsp;<input type="button" value="清空附件" id="btnClear" style="display:none" onclick="clearAttachment();">
<div id="attachmentList" style="margin:3px 0px 0px 0px;padding:4px 3px 4px 3px;background-color:#DEEBC6;display:none;border:1px solid #84A24A;">
</div>
<div id="total" style="margin:3px 0px 0px 0px;">当前选择上传0个附件</div>
</fieldset>
</BODY>
</HTML>
  • 描述: 仿126 GMail QQ添加附件的界面运行截图
  • 大小: 19.8 KB
分享到:
评论
5 楼 lyg 2010-04-17  
于安全性考虑,file控件不能通过脚本来赋值和选择文件,想要上传文件就得通过鼠标来点击file控件自带的“浏览...”按钮,博主的这个写法虽然能够选择文件,但是无法上传文件的。
4 楼 abin103 2009-02-18  
先不说其他的 一点都不实用 不能通过ie安全 是不能提交到后台的 希望能提出改进 如果我改好了 我一定贴出来
3 楼 eclipse_spring 2008-10-14  
不是,没有使用Ajax框架,是纯JavaScript。
2 楼 fangyu12 2008-10-14  
是prototype框架的吧
1 楼 pubx 2008-10-08  
效果不错!

相关推荐

    邮趣mail邮箱 For Android v2.2.33.zip

    支持管理多个邮箱账户163网易邮箱、126邮箱、139邮箱、Gmail、QQ…等等均可代收。 2. 实时推送新邮,让你不再错过每一封重要邮件。 3. 根据网络与存储空间,智能收发邮件,比同类产品节省30%流量。 4. 多媒体邮件...

    ExcelToMail工资条邮件助手 v2016.2.zip

    主流邮箱都能发送(QQ、163、126、Gmail…),支持延时发送 同时支持配置多个发件地址 发送邮箱支持阅读回执,方便统计发送后读取数量情况 当发送完部分失败,支持等一段时间自动重发 自动保存发送记录,方便...

    申请免费电子邮箱(PPT)

    在申请免费电子邮箱的过程中,通常我们会选择知名的邮箱服务商,如网易163邮箱、腾讯QQ邮箱、阿里巴巴的126邮箱或谷歌的Gmail等。这些服务商提供免费的邮箱服务,用户只需按照步骤注册即可拥有自己的电子邮箱地址。 ...

    2022第七届数维杯大学生数学建模挑战赛论文提交流程(1).pdf

    - **建议使用非QQ、edu邮箱以外的邮箱发送**:如126、163、Gmail等。 #### 四、注意事项 - **重复提交**:参赛队伍可以在规定时间内多次提交,最终以最后一次提交为准。 - **提交方式选择**:只能选择一种提交...

    OFDM、OOK、PPM、QAM 的误码率模拟【绘制不同调制方案的误码率曲线】附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82.png

    8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82

    Android SO逆向-对象的拷贝构造函数.pdf

    Android逆向过程学习

    基于S7-200 PLC的糖果包装控制系统设计与实现

    内容概要:本文详细介绍了基于西门子S7-200 PLC的糖果包装控制系统的设计与实现。首先阐述了PLC在工业自动化领域的优势及其在糖果包装生产线中的重要性。接着深入探讨了系统的硬件连接方式,包括传感器、执行机构与PLC的具体接口配置。随后展示了关键的编程实现部分,如糖果计数、包装执行、送膜控制、称重判断以及热封温度控制等具体梯形图代码片段。此外,还分享了一些实用的经验技巧,如防止信号抖动、PID参数优化、故障诊断方法等。最后总结了该系统的优势,强调其对提高生产效率和产品质量的重要作用。 适合人群:从事工业自动化控制、PLC编程的技术人员,尤其是对小型PLC系统感兴趣的工程师。 使用场景及目标:适用于糖果制造企业,旨在提升包装生产线的自动化程度,确保高效稳定的生产过程,同时降低维护成本并提高产品一致性。 其他说明:文中不仅提供了详细的理论讲解和技术指导,还结合实际案例进行了经验分享,有助于读者更好地理解和掌握相关知识。

    PLC与WinCC实现三部十层电梯协同控制及优化技巧

    内容概要:本文详细介绍了参与西门子杯比赛中关于三部十层电梯系统的博图V15.1程序设计及其WinCC画面展示的内容。文中不仅展示了电梯系统的基本架构,如抢单逻辑、方向决策、状态机管理等核心算法(采用SCL语言编写),还分享了许多实际调试过程中遇到的问题及解决方案,例如未初始化变量导致的异常行为、状态机遗漏空闲状态、WinCC画面动态显示的挑战以及通信配置中的ASCII码解析错误等问题。此外,作者还特别提到一些创意性的设计,如电梯同时到达同一层时楼层显示器变为闪烁爱心的效果,以及节能模式下电梯自动停靠中间楼层的功能。 适合人群:对PLC编程、工业自动化控制、电梯调度算法感兴趣的工程技术人员,尤其是准备参加类似竞赛的学生和技术爱好者。 使用场景及目标:适用于希望深入了解PLC编程实践、掌握电梯群控系统的设计思路和技术要点的人士。通过学习本文可以更好地理解如何利用PLC进行复杂的机电一体化项目的开发,提高解决实际问题的能力。 其他说明:文章风格幽默诙谐,将严肃的技术话题融入轻松的生活化比喻之中,使得原本枯燥的专业知识变得生动有趣。同时,文中提供的经验教训对于从事相关领域的工作者来说非常宝贵,能够帮助他们少走弯路并激发更多创新思维。

    慧荣量产工具合集.zip

    慧荣量产工具合集.zip

    永磁同步电机FOC控制与SVPWM算法仿真模型解析

    内容概要:本文详细介绍了永磁同步电机(PMSM)的FOC(磁场定向控制)和SVPWM(空间矢量脉宽调制)算法的仿真模型。首先解释了FOC的基本原理及其核心的坐标变换(Clark变换和Park变换),并给出了相应的Python代码实现。接下来探讨了SVPWM算法的工作机制,包括扇区判断和占空比计算的方法。此外,文章还讨论了电机的PI双闭环控制结构,即速度环和电流环的设计与实现。文中不仅提供了详细的理论背景,还分享了一些实用的编程技巧和注意事项,帮助读者更好地理解和应用这些算法。 适合人群:电气工程专业学生、从事电机控制系统开发的技术人员以及对永磁同步电机控制感兴趣的科研人员。 使用场景及目标:① 学习和掌握永磁同步电机的FOC控制和SVPWM算法的具体实现;② 提供丰富的代码示例和实践经验,便于快速搭建和调试仿真模型;③ 探讨不同参数设置对电机性能的影响,提高系统的稳定性和效率。 其他说明:文章强调了在实际应用中需要注意的一些细节问题,如坐标变换中的系数选择、SVPWM算法中的扇区判断优化以及PI控制器的参数调整等。同时,鼓励读者通过动手实验来加深对各个模块的理解。

    spring-ai-qianfan-1.0.0-M5.jar中文文档.zip

    # 压缩文件中包含: 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字: jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法: 解压最外层zip,再解压其中的zip包,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档为人性化翻译,精心制作,请放心使用。 ·只翻译了该翻译的内容,如:注释、说明、描述、用法讲解 等; ·不该翻译的内容保持原样,如:类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示: (1)为了防止解压后路径太长导致浏览器无法打开,推荐在解压时选择“解压到当前文件夹”(放心,自带文件夹,文件不会散落一地); (2)有时,一套Java组件会有多个jar,所以在下载前,请仔细阅读本篇描述,以确保这就是你需要的文件;

    Android安全之旅系列博客导读.pdf

    Android逆向过程学习

    【图像处理】基于双目视觉的物体体积测量算法研究附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    3dmax插件按面积分离.ms

    3dmax插件

    spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar中文文档.zip

    # 【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar中文文档.zip】 中包含: 中文文档:【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7-javadoc-API文档-中文(简体)版.zip】 jar包下载地址:【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖:【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖:【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址:【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字: spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar中文文档.zip,java,spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar,org.springframework.ai,spring-ai-autoconfigure-vector-store-qdrant,1.0.0-M7,org.springframework.ai.vectorstore.qdr

    【ARIMA-WOA-LSTM】差分自回归移动平均方法-鲸鱼优化算法-LSTM预测研究附python代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    永磁同步电机控制系统中平方根容积卡尔曼滤波(SRCKF)的应用及优化

    内容概要:本文详细介绍了平方根容积卡尔曼滤波(SRCKF)在永磁同步电机(PMSM)控制系统中的应用及其相对于传统CKF的优势。文章首先指出传统CKF在处理协方差矩阵时存在的数值不稳定性和非正定问题,导致系统性能下降。接着,作者通过引入SRCKF,利用Cholesky分解和QR分解来确保协方差矩阵的正定性,从而提高状态估计的精度和稳定性。文中展示了具体的电机模型和状态方程,并提供了详细的代码实现,包括状态预测、容积点生成以及观测更新等关键步骤。此外,文章还分享了实际调试过程中遇到的问题及解决方案,如选择合适的矩阵分解库和处理电机参数敏感性。最终,通过实验数据对比,证明了SRCKF在突加负载情况下的优越表现。 适合人群:从事永磁同步电机控制研究的技术人员、研究生及以上学历的研究者。 使用场景及目标:适用于需要高精度状态估计的永磁同步电机控制系统的设计与优化,特别是在处理非线性问题和提高数值稳定性方面。 其他说明:文章引用了相关领域的权威文献,如Arasaratnam的TAC论文和Zhong的《PMSM无传感器控制综述》,并强调了实际工程实践中代码调试的重要性。

    tokenizers-0.31.1.jar中文文档.zip

    # 【tokenizers-***.jar***文档.zip】 中包含: ***文档:【tokenizers-***-javadoc-API文档-中文(简体)版.zip】 jar包下载地址:【tokenizers-***.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖:【tokenizers-***.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖:【tokenizers-***.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址:【tokenizers-***-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字: tokenizers-***.jar***文档.zip,java,tokenizers-***.jar,ai.djl.huggingface,tokenizers,***,ai.djl.engine.rust,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,djl,huggingface,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法: 解压 【tokenizers-***.jar***文档.zip】,再解压其中的 【tokenizers-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档为人性化翻译,精心制作,请放心使用。 ·只翻译了该翻译的内容,如:注释、说明、描述、用法讲解 等; ·不该翻译的内容保持原样,如:类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示: (1)为了防止解压后路径太长导致浏览器无法打开,推荐在解压时选择“解压到当前文件夹”(放心,自带文件夹,文件不会散落一地); (2)有时,一套Java组件会有多个jar,所以在下载前,请仔细阅读本篇描述,以确保这就是你需要的文件; # Maven依赖: ``` <dependency> <groupId>ai.djl.huggingface</groupId> <artifactId>tokenizers</artifactId> <version>***</version> </dependency> ``` # Gradle依赖: ``` Gradle: implementation group: 'ai.djl.huggingface', name: 'tokenizers', version: '***' Gradle (Short): implementation 'ai.djl.huggingface:tokenizers:***' Gradle (Kotlin): implementation("ai.djl.huggingface:tokenizers:***") ``` # 含有的 Java package(包): ``` ai.djl.engine.rust ai.djl.engine.rust.zoo ai.djl.huggingface.tokenizers ai.djl.huggingface.tokenizers.jni ai.djl.huggingface.translator ai.djl.huggingface.zoo ``` # 含有的 Java class(类): ``` ai.djl.engine.rust.RsEngine ai.djl.engine.rust.RsEngineProvider ai.djl.engine.rust.RsModel ai.djl.engine.rust.RsNDArray ai.djl.engine.rust.RsNDArrayEx ai.djl.engine.rust.RsNDArrayIndexer ai.djl.engine.rust.RsNDManager ai.djl.engine.rust.RsSymbolBlock ai.djl.engine.rust.RustLibrary ai.djl.engine.rust.zoo.RsModelZoo ai.djl.engine.rust.zoo.RsZooProvider ai.djl.huggingface.tokenizers.Encoding ai.djl.huggingface.tokenizers.HuggingFaceTokenizer ai.djl.huggingface.tokenizers.HuggingFaceTokenizer.Builder ai.djl.hu

    3.png

    3

Global site tag (gtag.js) - Google Analytics