jsp上传文件,隐藏file标签,使用span和text标签展示

jsp上传文件,隐藏file标签,使用span和text标签展示,代码如下

 

<span class="mr5">文件名称</span><input type="text" id="fileaddress" class="zqzm_text2 mr5" />
       <input type="file" id="filename"   style="position:absolute;opacity:0;filter:alpha(opacity=0);width:55px;height:25px;"
           name="filename" οnchange="fileaddress.value=this.value;"/>
       <span class="zqzm_btn1 mr5"  id="liulan">浏览</span>

 

由于浏览span标签要和file标签处在同一个位置,隐藏file标签。

有的ie版本会出现隐藏不掉的情况,需要在file标签中增加 opacity:0;filter:alpha(opacity=0); 这个样式来解决。

同时span和file标签可能覆盖不全,需要在点击span的时候调用file的点击事件。

点击上传修改text标签的值。

$("#liulan").bind("click",
 function(){
  
  $("#filename").click();
 }
);

$("#filename").change(
 function(){
  
  $("#fileaddress").val($("#filename").val());
 }
);

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
注:此处使用的是MySQL数据库,JDBC连接时需要导入MySQL驱动。 1. 创建数据库和表 在MySQL中创建一个名为test的数据库,然后在该数据库中创建一个名为comments的表,如下: ```sql CREATE DATABASE test; USE test; CREATE TABLE comments ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL, commentText TEXT NOT NULL, createTime DATETIME NOT NULL, PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ``` 2. 编写前端页面 在webapp目录下,创建comment.jsp页面,如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>评论列表</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function () { $("#submit").click(function () { if ($("#name").val() == "") { alert("请填写姓名!"); return false; } if ($("#commentText").val() == "") { alert("请填写评论!"); return false; } $.ajax({ type: "POST", url: "commentHandler.jsp", data: { "name": $("#name").val(), "commentText": $("#commentText").val() }, success: function (data) { $("#name").val(""); $("#commentText").val(""); $("#commentList").prepend(data); } }); }); }); </script> </head> <body> <h2>添加评论</h2> <form id="commentForm"> <label for="name">姓名:</label> <input type="text" name="name" id="name"><br> <label for="commentText">评论:</label> <textarea name="commentText" id="commentText" rows="5"></textarea><br> <input type="button" value="提交" id="submit"> </form> <h2>评论列表</h2> <div id="commentList"> <% // import java.sql.DriverManager; // import java.sql.Connection; // import java.sql.PreparedStatement; // import java.sql.ResultSet; Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false"; String dbUsername = "root"; String dbPassword = "password"; Connection connection = DriverManager.getConnection(url, dbUsername, dbPassword); PreparedStatement statement = connection.prepareStatement("SELECT * FROM comments ORDER BY createTime DESC;"); ResultSet resultSet = statement.executeQuery(); while (resultSet.next()) { %> <div> <strong><%= resultSet.getString("name") %></strong> <span><%= resultSet.getString("createTime") %></span> <p><%= resultSet.getString("commentText") %></p> </div> <% } resultSet.close(); statement.close(); connection.close(); %> </div> </body> </html> ``` 该页面包含一个表单,用于输入姓名和评论,以及一个评论列表,用于展示所有的评论。注意:在该页面中,我们并没有直接在`comment.jsp`中使用JDBC连接数据库,而是将其放到了`commentHandler.jsp`中,这样做可以避免在JSP页面中直接调用JDBC API而导致的复杂性和不安全性问题。 3. 编写commentHandler.jsp页面 在webapp目录下,创建commentHandler.jsp页面,用于处理表单提交的数据,如下: ```jsp <% // import java.sql.DriverManager; // import java.sql.Connection; // import java.sql.PreparedStatement; // import java.time.LocalDateTime; // import java.time.format.DateTimeFormatter; Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false"; String dbUsername = "root"; String dbPassword = "password"; Connection connection = DriverManager.getConnection(url, dbUsername, dbPassword); PreparedStatement statement = connection.prepareStatement("INSERT INTO comments (name, commentText, createTime) VALUES (?, ?, ?);"); statement.setString(1, request.getParameter("name")); statement.setString(2, request.getParameter("commentText")); LocalDateTime now = LocalDateTime.now(); DateTimeFormatter format = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"); statement.setString(3, now.format(format)); statement.executeUpdate(); ResultSet resultSet = statement.getGeneratedKeys(); int id; if (resultSet.next()) { id = resultSet.getInt(1); } else { throw new IllegalStateException("Could not retrieve ID after insert"); } statement.close(); connection.close(); %> <div> <strong><%= request.getParameter("name") %></strong> <span><%= now.format(format) %></span> <p><%= request.getParameter("commentText") %></p> </div> ``` 在该页面中,我们使用了JDBC连接MySQL数据库,并插入了新的评论。由于数据库中还包含了一些其他的字段,如id和createTime,因此这里我们通过JDBC API设置值并插入到数据库中。此外,我们还在该页面中返回了一个HTML片段,该片段用于在前端页面中动态添加新的评论。 4. 启动Tomcat服务器 使用$CATALINA_HOME/bin/startup.sh或startup.bat启动Tomcat服务器,并访问http://localhost:8080/comment.jsp,即可看到评论页面的效果。在该页面中,我们可以输入任意的姓名和评论内容,然后提交后就能够将其添加到数据库中并立即展示在评论列表中。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值