JSP多文件上传,动态添加文件选择框和按钮,并添加事件

最新推荐文章于 2022-05-01 12:58:41 发布
最新推荐文章于 2022-05-01 12:58:41 发布
阅读量6.5k 收藏 2
点赞数
分类专栏： HTML5+CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alanzyy/article/details/8243733
版权

直接帖上代码，对于添加事件，这里有两行代码是重点：

                    fileObj.onchange = function(){checkFileSuffix()};

                    delObj.onclick = function(){delInputFile(delObj)};

//通过这种方式为onclick指定事件，不会直接执行delInputFile(delObj)方法，如果使用delObj.onclick = delInputFile(delObj);会直接执行delInputFile(delObj);方法，且指定的事件无效。

 

<%-- 
    Document   : multiFileUpload
    Created on : 2012-11-13, 17:13:55
    Author     : hualun-alan
--%>

<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF8">
        <STYLE type="text/css">
            BODY {
                MARGIN: 0px
            }
            .style1 {
                FONT-SIZE: 12px; FONT-FAMILY: Arial
            }
            .style3 {
                FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #3c5e84; FONT-FAMILY: Arial
            }
            .style4 {
                FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: red; FONT-FAMILY: Arial
            }
            .style5 {
                FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; FONT-FAMILY: Arial
            }
        </STYLE>
        <title>Upload Multi Figures</title>
        <SCRIPT language=javascript type=text/javascript>
            var fileIndex = 1;
            function addFile() {
                if(fileIndex>9){
                    alert("Sorry!You can only upload 10 figures at a time!");
                }else{
                    fileIndex++;
                    var idx = fileIndex;
                    addInputFile(idx);
                }
            }
            
            function checkFileSuffix(){
                var throughCheck = true;
                for(var i = 1; i <= fileIndex; i++){
                    var inputComp = document.getElementById("file" + i);
                    if(inputComp.value == null || inputComp.value == ""){
                        continue;
                    }
                    
                    var fileExt = inputComp.value.substr(inputComp.value.lastIndexOf(".")).toLowerCase();
                    if(!(fileExt == ".jpg" || fileExt == ".png" || fileExt == ".bmp" || fileExt == ".gif" || fileExt == ".svg" || fileExt == ".emf")){
                        throughCheck = false;
                    }
                }
                
                var message = document.getElementById("message");
                var UploadButton = document.getElementById("UploadButton");
                if(!throughCheck){
                    message.innerHTML = "<font style='font-family: Arial' color='red'>Please select a figure with type JPG/PNF/BMP/GIF/SVG/EMF!</font>";
                    UploadButton.disabled=true;
                }else{
                    message.innerHTML = "<font style='font-family: Arial' color='green'>OK!</font>";
                    UploadButton.disabled=false;
                }
            }
            
            function addInputFile(idx) {
                var span = document.getElementById("filespan");
                if (span != null) {
                    var divObj = document.createElement("div");
                    divObj.id = "div"+idx;
  
                    var fileObj = document.createElement("input");
                    fileObj.type = "file";
                    fileObj.id = "file"+idx;
                    fileObj.name = "name"+idx;
                    fileObj.onchange = function(){checkFileSuffix()};
                    fileObj.size = "40";
                    fileObj.maxlength = "20";
                    
                    var delObj = document.createElement("input");
                    delObj.id = "btn"+idx;
                    delObj.type = "button";
                    delObj.onclick = function(){delInputFile(delObj)};
                    delObj.value = "Delete";
                    
                    divObj.appendChild(document.createTextNode("Please select figure: "));
                    divObj.appendChild(fileObj);
                    divObj.appendChild(document.createTextNode(" "));
                    divObj.appendChild(delObj);
                    divObj.appendChild(document.createElement("br"));
        
                    span.appendChild(divObj);
                }
            }

            function delInputFile(obj) {
                var idx = obj.id.substring(3);
                var span = document.getElementById("filespan");
                var divObj = document.getElementById("div"+idx);
                if (span != null && divObj != null) {
                    idx++;
            
                    for(var i = idx; i <= fileIndex; i++){
                        var inputComp1 = document.getElementById("file" + i);
                        var inputComp2 = document.getElementById("btn" + i);
                        var inputComp3 = document.getElementById("div" + i);
                        i--;
                        inputComp1.id = "file" + i;
                        inputComp2.id = "btn" + i;
                        inputComp3.id = "div" + i;
                        i++;
                    }
                    
                    span.removeChild(divObj); 
                    fileIndex--;
                    checkFileSuffix();
                }
            }

            var bar=0;
            var plot = ".";
            var plots = "";
            function uploading(){
                document.getElementById('UploadButton').disabled = true;
                document.getElementById('form1').submit();
                count();
            }

            function reseting(){
                document.getElementById("message").innerHTML = "";
                document.getElementById('UploadButton').disabled = true;
                document.getElementById('form1').reset();
            }

            function count(){
                bar = bar+2;
                plots = plots + plot;

                if(bar>60){
                    bar = 0;
                    plots = "";
                }

                var message = document.getElementById('message');
                message.innerHTML = "<font style='font-family: Arial' color='green'>Uploading, please wait..." + plots +"</font>";
                setTimeout("count()",1000);
            }
        </script>
    </head>
    <body>
        <%String url = "../../servlet/com.cc.das.userdata.UDEAddFiguresServlet?reqType=uploadMultiFigure";%>
        <form enctype="multipart/form-data" name="form1" id="form1" method="post" action="<%=url%>">
            <table>
                <TBODY>
                    <TR>
                    <TD></TD>
                    <TD width=700 height=20></TD>
                    <TD></TD>
                    </TR>

                    <TR>
                    <TD> </TD>
                    <TD vAlign=top align=left>
                        <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                            <TBODY>
                                <TR>
                                <TD width="4%"> </TD>
                                <TD width="92%" height=20> </TD>
                                <TD width="4%"> </TD></TR>
                                <TR>
                                <TD> </TD>
                                <TD height=25> <SPAN class=style3>Upload Multi Figures</SPAN></TD>
                                <TD> </TD>
                                </TR>
                                <TR>
                                <TD colspan="3" height="10"> </TD>
                                </TR>
                                <tr>
                                <TD> </TD>
                                <td id="filespan">
                                    <div>
                                        Please select figure: <input type="file" οnchange="checkFileSuffix()" name="file1" id="file1" size="40" maxlength="20"> <input id="btnAdd" οnclick="addFile()" type="button" value="Add More..."><br>
                                    </div>
                                </td>
                                <TD> </TD>
                                </tr>

                                <TR>
                                <TD> </TD>
                                <TD align=center height=40>
                                    <div id="message">
                                        <%if ((request.getParameter("error")) != null && (request.getParameter("error")).equals("figureTooLarge")) {%>
                                        <font color='red'>The current system accepts figure with maximum size 5 MB!</font>
                                        <%}%>
                                    </div>
                                </TD>
                                <TD> </TD>
                                </TR>
                                <TR>
                                <TD> </TD>
                                <TD align=center height=40>
                                    <input type="button" id="UploadButton" value="Upload Figures" οnclick="uploading();" disabled/> 
                                    <input type="button" id="ResetButton" value="Reset" οnclick="reseting();"/> 
                                </TD>
                                <TD> </TD>
                                </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                    <TD> </TD>
                    </TR>
                </TBODY>
            </table>
        </form>
    </body>
</html>

alanzyy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSP多文件上传（一次性可选多个文件）
cowboy的专栏
04-10 1万+
结合flash，可以方便的实现多文件上传。而且可以一次性选择多个文件。 这个例子使用了三个三方库： Apache Commons FileUpload http://commons.apache.org/fileupload/ Apache Commons IO http://commons.apache.org/io/ SWFUpload  http://swfupload.org/
java往jsp页面嵌入弹出框_jsp页面制作弹出框
weixin_30556871的博客
02-25 3600
各种弹出页面的设计【1、普通的弹出窗口】其实代码非常简单：因为这是一段javascript代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open('page.html')用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http:...
JSP按钮事件
11-20
该文档为JSP普通button的操作，对初学jsp有很大的帮助。
java /Spring /jsp 使用input标签 file 如何上传多个文件
叮咚侠的博客
03-05 6013
jsp： multiple /> 增加  multiple  属性即可，这样在选择的时候，就可以选择多个文件 效果如下： 后台： import org.springframework.web.portlet.multipart.DefaultMultipartActionRequest; import org.springframework.web.mult
jsp实现文件的上传
越努力越幸运的博客
07-21 1万+
文章目录文件的上传和下载一、文件的上传1.1 文件上传的介绍1.2 文件上传的HTTP协议说明1.3 简单的实例1.4 解析上传的文件解析上传数据常用的类和方法实例二、相关的jar包下载路径 文件的上传和下载 一、文件的上传 1.1 文件上传的介绍 在jsp中，文件的上传分为四个步骤： 1、要有一个form标签，method = post请求 2、form标签的encType属性值要设置为multipart/form-data 3、在form标签中，使用input type = file 添加上传的文件 4
jsp简单文件的批量上传
咖喱辣椒
11-30 1286
下面给大家介绍一下上传文件的简单的代码，首先想上传文件就要导入一个包 放在WEB-INF下的lib文件中 smartupload.jar 它里面包含了上传文件所需要的类，这个架包大家可以去我的博客里面找。下面我们直接来看代码这个是初始界面 fileupload.jsp页面 &amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UT...
使用FormData实现上传多个文件
10-17
JavaScript部分使用jQuery监听表单的提交事件，并在文件选择改变时更新文件列表。当用户点击“提交”按钮，`sendFile`函数会被调用，该函数创建一个新的`FormData`对象，并将所有选定的文件添加到其中： ```...
jQuery实现异步上传一个或多个文件
10-14
在JSP文件中，我们可以创建一个HTML表单，其中包含一个或多个`<input type="file">`元素，用于选择要上传的文件。例如： ```html 上传"> ``` 接下来，我们编写jQuery脚本来监听提交按钮的点击事件，并使用`...
JS+Struts2多文件上传实例详解
10-18
总的来说，JS+Struts2实现多文件上传涉及前端的动态添加文件输入框，后端的Action类接收和处理文件，以及Struts2的配置。这是一个典型的前后端交互示例，对于开发Web应用中的文件上传功能具有重要的参考价值。
Springmvc加ajax实现上传文件并页面局部刷新
08-19
总结起来，Spring MVC结合Ajax实现文件上传并页面局部刷新，主要涉及前端的文件选择、FormData构建、Ajax请求，以及后端的文件接收和处理。通过这种方式，可以提供更佳的用户体验，避免了传统方式中整个页面刷新带来...
jsp 上传附件，类似163添加附件界面，有上传进度显示
09-02
"jsp上传附件，类似163添加附件界面，有上传进度显示"这一主题，涉及了网页端文件上传的一种实现方式，它借鉴了163邮箱的附件添加功能，并加入了实时的上传进度反馈。下面我们将详细探讨这一技术实现的关键知识点。 ...
jsp页面中利用弹窗增加数据
Ich warte auf dich的博客
09-05 4365
在对后台对数据进行管理的时候我们可以利用弹窗做很多事情，例如增加数据，原理就是利用layer弹窗技术打开另一个前端页面然后提交表单，刷新页面，当然也可以局部刷新。 具体实现： 在总页面中设置一个添加按钮绑定事件根据layer弹窗直接打开另一个jsp窗口，在另一个jsp页面中绑定form表单直接提交到后端执行增加数据的action，但不能在该action中设置其他视图跳转，最好把该方法返回值设为...
java点击图片上传_jsp中点击图片弹出文件上传界面及实现预览实例详解
weixin_33188115的博客
02-26 499
jsp中点击图片弹出文件上传界面及实现预览实例详解花了两天时间琢磨一下图片预览的功能任务需求如下：1：jsp页面中有一个图片(pic_1)2：点击图片弹出类似于资源管理器的界面3：选择完某一个图片之后在pic_1处预览我在ie8上试验下面这段代码，可以实现上述功能，没有在别的浏览器中测试，如果各位朋友知道多种浏览器的支持方法，请赐教，共同学习，谢谢。insert title herefunctio...
jsp中，一个button onclick跳转
热门推荐
校尉的博客
09-04 2万+
1、jsp中，一个button onclick跳转 方式一：onclick="window.location='new.jsp'"。 onclick="openpage()" 方式二： JavaScript">   function openpage(){       window.location.replace("/new.jsp");   }
android checkbox 选中事件_木辛老师的编程课堂之Python和Qt实战慕课软件开发：该添加事件咯...
weixin_40009026的博客
11-26 349
在软件开发中，增加事件处理逻辑，可以使软件交互更加友好，可用。如何增加按钮点击事件，如何增加列表滑动事件？快点跟着木辛老师一起学习吧！请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Python编程知识，变身快乐的编程达人吧~通过之前的几节课程，我们已经将登录页面制作完成了，通过使用QSS美化了各个控件，并添加了部分切换效果。这一节课呢，我们会完结登录页面的开发，添加事件处理逻辑，这样，一个完...
JSP事件——键盘、鼠标、表单
qq_51507950的博客
05-01 4267
JS事件通常是指用户通过鼠标或者键盘以及其他方式对浏览器或浏览器网页中的某些节点或者元素进行操作，是用户与浏览器交互最为常见的方式。 1.键盘 1、onclick onclick是最常见的鼠标事件，由用户使用鼠标左键点击后触发相应的函数方法。 document.body.onclick = function(){ //点击body元素，触发点击事件 console.log('点击事件触发') } document 指的是当前网页 (文档)对象，function 是定义函数的关键字,conso
JSP中用js控制添加行，删除行
sxwhbj的博客
07-21 1414
其中涉及到样式，样式可以自己添加。增加行点击“添加”，删除行点击每一行后边的“删除”。     测试           function saveInStorage()     {        var can_submit = true;        var storageId = $("#storageId").val();        if
jsp中怎么使用按钮，动态添加表情选择框？
最新发布
06-02
在 JSP 中，您可以使用 HTML、CSS 和 JavaScript 创建一个包含表情的下拉框，然后在点击按钮时动态地将其添加到页面中。以下是一个简单的示例代码： JSP 代码： ```jsp 显示表情 <div id="emoji-container"></div>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值