Jsp+Servlet实现文件上传下载——前台页面开发

系统管理员 2022-08-09 02:17 186阅读 0赞

**       JSP和Servlet都是J2EE的规范，JSP全名为Java Server Pages，中文名叫java服务器页面，它是在传统的网页HTML文件中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件。Servlet（Server Applet），全称Java Servlet。是用Java编写的服务器端 程序。其主要功能在于交互式地浏览和修改数据，生成动态Web内容。看这部分的视频的时候，只有理论知识，看着很枯燥，就做个小的例子来实践一下。由于篇幅比较长，所以小编将写成系列博客，这篇博客将先介绍Jsp+Servlet实现文件上传下载的前期工作：前台页面开发，开发工具：myeclipse**

# **【1】搭建环境** #

**1、打开myeclipse，新建一个web project**

![Center][]

**填写project name的名字，小编是以文件上传下载的首字母来命名的，然后点击Finish，这样就可以创建一个Web project工程了。**

![Center 1][]

**2、新建Folder，分别添加css，js，jsp，images的Folder**

![Center 2][]

![Center 3][]

**3、添加css样式，js和需要的images图片，不是本博客的重点，把链接附上。**

**链接：[http://pan.baidu.com/s/1gdFExb1][http_pan.baidu.com_s_1gdFExb1]**

[  
][http_pan.baidu.com_s_1gdFExb1]

# **【2】代码部分** #

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
    <%
    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 '01.jsp' starting page</title>
        
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	
    	<link rel="stylesheet" type="text/css" href="css/common.css">
    	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    	<script type="text/javascript">
    >
    	$(function(){
    	$(".thumbs a").click(function(){
    	var largePath=$(this).attr("href");
    	var largeAlt=$(this).attr("title");
    	$("#largeImg").attr({
    		src:largePath,
    		alt:largeAlt
    });
    	return false;
    });
    });
    </script>
      </head>
      
      <body>
       <h2>图片预览</h2>
      <p><img id="largeImg" src="images/6.png" alt="Large Image"/></p>
      <p class="thumbs">
      <a href="images/1.png" title="Image1"><img src="images/11.png"></a>
      <a href="images/2.png" title="Image2"><img src="images/21.png"></a>
      <a href="images/3.png" title="Image3"><img src="images/31.png"></a>
      <a href="images/4.png" title="Image4"><img src="images/41.png"></a>
      <a href="images/5.png" title="Image5"><img src="images/51.png"></a>
      </body>
    </html>

# **【3】效果** #

**![Center 4][]**

**![Center 5][]**

# **总结** #

**         在前台页面开发这部分中，只是做了个简单的demo，主要用到的是css和jquery中的内容，在之前的学习中这些知识都是接触过的，只是换了个开发工具而已，设计样式是为上传和下载做个铺垫，在接下来的博客中，将会进一步介绍如何对文件进行上传和下载。**

[Center]: /images/20220731/504b47cf19a64503b6793d819dd80953.png
[Center 1]: /images/20220731/dcccc0b9253d4e5da4af59a1f146dac0.png
[Center 2]: /images/20220731/54d45851f7c04c599b82cfbb667a2251.png
[Center 3]: /images/20220731/d5ea006fd9724a95b14fea9b21f5afde.png
[http_pan.baidu.com_s_1gdFExb1]: http://pan.baidu.com/s/1gdFExb1
[Center 4]: /images/20220731/9f96a99c7ef14e499f7e1d4087b2caa2.png
[Center 5]: /images/20220731/0d11535f5abf49a58854961339abf48e.png