jsp页面中动态添加上传输入项注意的问题：“添加上传文件”按钮的name属性值不能和onclick属性的值相同！！！

最新推荐文章于 2023-11-18 22:24:03 发布

吃饭从来不走神

最新推荐文章于 2023-11-18 22:24:03 发布

阅读量2.1k

点赞数 1

文章标签： javaweb

本文链接：https://blog.csdn.net/sinat_23179379/article/details/50496830

版权

jsp网页实现动态添加&删除上传输入项。
效果如下图：点击“添加上传文件”就会自动生成一个上传输入项，点击删除，就会删除当前上传输入项。
图片描述

源码：

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在网页中动态添加上传输入项</title>
       <script type="text/javascript">
          function addfile(){
              //获取id为files的节点
              var files=document.getElementById("files");
              //创建两个输入项，一个是上传文件，一个是“删除”button
              var input=document.createElement("input");
              input.type="file";
              input.name="file";

              var btn=document.createElement("input");
              btn.type="button";
              btn.value="删除";
              //点击删除button时，删除那个小的div
              btn.onclick=function del(){
                  this.parentNode.parentNode.removeChild(this.parentNode);
              }
              //将上传文件输入项和“删除”button添加到一个小的div上
              var div=document.createElement("div");
              div.appendChild(input);
              div.appendChild(btn);

              files.appendChild(div);
          }
      </script>
</head>
<body>
     将表格放在表单中。
       <form action="${pageContext.request.contextPath }/UploadServlet2" enctype="multipart/form-data" method="post">   
         <table>
           <tr>
             <td>上传用户</td>
             <td>
               <input type="text" name="username">
             </td>
           </tr>

           <tr>
             <td>上传文件</td>
             <td>
             name的值和onclick的值（方法名）相同导致发生冲突。
               <input type="button" name="addfile" value="添加上传文件" onclick="addfile()">      
             </td>
           </tr>

           <tr>
             <td></td>
             <td>
                <div id="files"></div>
             </td>
           </tr>

           <tr>
              <td>
                <input type="reset" value="重新填写">
              </td>
              <td>
                <input type="submit" value="提交">
              </td>
           </tr>

         </table>
         将表格放在表单中。
       </form>  
</body>
</html>

问题描述：“添加上传文件”按钮的name属性值是“addfile”，onclick属性值也是“addfile”，如此一来就会导致：当把table表格放在一个form表单中，然后让代码在服务器运行后，点击“添加上传文件”按钮没有任何现象。
点击“添加上传文件”按钮，没有任何作用！

解决方法：
1.修改“添加上传文件”按钮的属性的值（使其和onclick属性的值不同）。
2.直接删除name属性。
3.去掉form表单（但是这种解决方式没有任何意义）。
效果：
问题解决

吃饭从来不走神

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsp页面中动态添加上传输入项注意的问题：“添加上传文件”按钮的name属性值不能和onclick属性的值相同！！！

jsp网页实现动态添加&删除上传输入项。常见问题。效果如下图：点击“添加上传文件”就会自动生成一个上传输入项，点击删除，就会删除当前上传输入项。
复制链接

扫一扫