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

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

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

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

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

链接：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">
<!--  使用到了JQuery的内容-->>
	$(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】效果

总结

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