11.7 JSP 页面

发布于 2025-04-22 20:10:03 字数 2787 浏览 0 评论 0 收藏 0

用于上传图片文件的 ProductForm.jsp 页面如清单 11.4 所示。

清单 11.4 ProductForm.jsp 页面

< %@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
< %@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
< !DOCTYPE HTML>
< html>
< head>
< title>Add Product Form< /title>
< style type="text/css">@import url("<c:url
   value="/css/main.css"/>");< /style>
< /head>
< body>

< div id="global">
< form:form commandName="product" action="save-product" method="post"
    enctype="multipart/form-data">
  < fieldset>
    < legend>Add a product< /legend>
    < p>
      < label for="name">Product Name: < /label>
      < form:input id="name" path="name"
        cssErrorClass="error"/>
      < form:errors path="name" cssClass="error"/>
    < /p>
    < p>
      < label for="description">Description: 
      < form:input id="description" path="description"/>
    < /p>
    < p>
      < label for="price">Price: < /label>
      < form:input id="price" path="price"
        cssErrorClass="error"/>
    < /p>
    < p>
      < label for="image">Product Image: < /label>
      < input type="file" name="images[0]"/> < /p> < p id="buttons"> < input id="reset" type="reset"> < input id="submit" type="submit" value="Add Product"> < /p> < /fieldset> < /form:form> < /div> < /body> < /html>

注意表单中类型为 file 的 input 元素，它将显示为一个按钮，用于选择要上传的文件。

提交 Product 表单，将会调用 save-product 方法。如果这个方法成功地完成，用户将会跳转到清单 11.5 所示的 ProductDetails.jsp 页面。

清单 11.5 ProductDetails.jsp 页面

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>
<html>
<head>
<title>Save Product</title>
<style type="text/css">@import url("<c:url
    value="/css/main.css"/>");</style>
</head>
<body>
<div id="global">
  <h4>The product has been saved.</h4>
  <p>
    <h5>Details:</h5>
    Product Name: ${product.name}<br/>
    Description: ${product.description}<br/>
    Price: $${product.price}
    <p>Following files are uploaded successfully.</p>
    <ol>
    <c:forEach items="${product.images}" var="image">
      <li>${image.originalFilename}
      <img width="100" src="<c:url value="/image/"/>
      ${image.originalFilename}"/>
      </li>
    </c:forEach>
    </ol>
  </p>
</div>
</body>
</html>

ProductDetails.jsp 页面显示出已保存的 Product 的详细信息及其图片。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

11.7 JSP 页面

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。