`
jianghe_03
  • 浏览: 107951 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 实现动态添加多个附件

阅读更多
效果图
代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'upload.jsp' starting page</title>
   
    <script type="text/javascript">
        function AddMore(){
            var more = document.getElementById("file");
            var br = document.createElement("br");
            var input = document.createElement("input");
            var button = document.createElement("input");
           
            input.type = "file";
            input.name = "file";
           
            button.type = "button";
            button.value = "删除";
           
            more.appendChild(br);
            more.appendChild(input);
            more.appendChild(button);
           
            button.onclick = function(){
                more.removeChild(br);
                more.removeChild(input);
                more.removeChild(button);
            };
        }
    </script>
</head>

<body>
    <s:form action="upload" method="post" theme="simple" enctype="multipart/form-data">
    <table border="1" width="50%">
        <tr>
            <td>用户名:</td>
            <td><s:textfield name="username" label="用户名"></s:textfield></td>
        </tr>
        <tr>
            <td>附件:</td>
            <td id="file">
            <s:file name="file" label="文件"></s:file>
            <input type="button" value="增加附件" onclick="AddMore()">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
            <s:submit value="提交" ></s:submit></td>
        </tr>
    </table>   
    </s:form>
</body>
</html>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    【JS常用代码】动态添加附件效果

    在JavaScript(JS)编程中,动态添加附件效果通常是指在网页上通过JavaScript代码实现动态创建、编辑或删除文件上传的功能。这种效果可以让用户在不刷新页面的情况下,方便地添加、预览和管理上传的文件,提高了用户...

    简单的仿163多附件添加功能

    通过分析标签"多附件添加"、"仿163附件添加"和"添加多个附件",我们可以深入探讨这个功能的核心技术点和实现步骤。 首先,我们需要理解多附件上传的基本原理。在Web应用中,用户通常通过点击一个“添加附件”按钮来...

    一款基于JavaScript实现的多附件上传表单添加类库源码及例子程序

    本资源提供了一款基于JavaScript实现的多附件上传表单添加类库的源码和示例程序,这对于开发者来说是一个很好的学习和实践工具。 首先,让我们深入理解JavaScript在多附件上传中的作用。JavaScript是一种客户端脚本...

    js发送邮件带附件

    添加一个或多个附件至邮件。注意路径应为有效且可访问的。 9. **发送邮件并检查返回值**: ```javascript var ret = jMail.Send("smtp.126.com"); if (ret == false) { alert('fail'); } else { alert('...

    泛微E9 JS实现流程字段联动出附件图片效果.docx

    创建一个名为`流程附件图片js.js`的脚本文件,这里主要编写JavaScript代码来处理图片的预览功能。这部分代码需要与泛微E9的API进行交互,获取到IMAGEDOCID对应的图片资源,并且在前端展示出来。同时,为了提供更好...

    动态添加附件-上传文件

    总结来说,动态添加附件并上传文件是一个涉及前端交互、文件处理、数据传输和后端存储等多个环节的复杂过程。开发者需要熟练掌握JavaScript、HTML5以及服务器端语言,才能实现这样一个功能,并确保其安全性和用户...

    js添加附件

    js实现页面上传附件,和网易邮箱添加附件差不多一个效果。可以支持上传多个

    js+html+css 实现带有进度条多附件依次上传

    这个项目"js+html+css 实现带有进度条多附件依次上传"是针对这一需求的一个实践练习,它结合了JavaScript、HTML和CSS三种技术来创建一个用户友好的多文件上传功能,并且在上传过程中显示进度条,提升用户体验。...

    jquery实现动态添加附件功能

    为了实现动态添加附件的用户界面,我们需要一个表单(form),该表单需要设置为支持文件上传的`multipart/form-data`编码类型。在这个表单中,我们通常需要一些隐藏字段来存储与用户会话或者操作相关的数据。接着,...

    JavaScript实现动态增加文件域.仿网易邮箱附件

    总结一下,实现JavaScript动态增加文件域并模仿网易邮箱附件功能的关键步骤包括: 1. 使用DOM操作创建`&lt;input type="file"&gt;`元素。 2. 将新创建的文件域插入到页面适当位置。 3. 添加`change`事件监听器,以便在用户...

    jquery动态添加多附件上传实例,开发实例

    本实例的压缩包可能包含了实现上述功能的HTML、CSS和JavaScript代码,你可以通过学习和调试这些代码,更深入地理解如何在实际项目中实现jQuery动态添加多附件上传。记住,实践是检验真理的唯一标准,不断尝试和改进...

    ASP.NET 多附件上传实现代码

    ***实现多附件上传的代码涉及到前端JavaScript以及后端的***处理技术,能够实现在网页上动态地添加多个文件上传控件,允许用户上传多个文件。这种实现方式在功能上类似于常见的邮件系统或网盘服务中的多文件上传功能...

    jquery实现多附件上传

    "jquery实现多附件上传"这个主题涉及到的是利用jQuery来创建一个功能,允许用户在网页上选择并上传多个文件。这在现代网页应用中是非常常见的需求,比如论坛、社交媒体或者在线协作平台。 在jQuery中实现多附件上传...

    javascript实现添加附件功能的方法

    4. **性能优化**:对于上传多个附件的情况,要考虑到用户上传操作的性能影响,并尽可能优化前端的处理逻辑。 5. **代码组织**:将JavaScript代码组织到合适的模块或类中,避免直接在HTML标签内使用`onclick`等内联...

    上传多个附件的js及相关

    这个主题“上传多个附件的js及相关”主要关注如何使用JavaScript(js)技术来实现这一功能。JavaScript是一种客户端脚本语言,它允许我们在用户的浏览器上运行代码,为网页添加交互性。下面将详细介绍这个知识点,并...

    c# ,js请高手帮忙在附件源码里添加上传进度显示

    标题 "c# ,js请高手帮忙在附件源码里添加上传进度显示" 暗示我们需要探讨的是如何在C#后端与JavaScript前端之间实现文件上传时的进度显示功能。这个功能常见于Web应用中,它能提升用户体验,让用户了解文件上传的...

    ASP.NET多附件上传和附件编辑的实现

    2. 删除标志:为每个附件添加一个删除按钮,当用户点击删除时,发送Ajax请求到服务器,确认后从服务器和数据库中移除文件。同时,更新前端的显示列表。 3. 安全考虑:在删除和编辑操作中,务必确保有适当的权限控制...

    js上传附件

    在JavaScript(简称JS)中实现上传附件功能是一项...综上所述,"js上传附件"涉及到了前端开发中的文件操作、事件处理、异步通信、错误处理以及用户体验优化等多个方面,而具体的实现细节则取决于项目的具体需求和设计。

    JS 实现文件上传功能

    在JavaScript的世界里,实现文件上传功能是一个常见的需求,尤其是在现代Web应用中。传统的文件上传通常依赖于Flash技术,但随着HTML5的普及,JavaScript已经能够提供原生的、无插件的文件上传解决方案。本教程将...

Global site tag (gtag.js) - Google Analytics