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中的内容，在之前的学习中这些知识都是接触过的，只是换了个开发工具而已，设计样式是为上传和下载做个铺垫，在接下来的博客中，将会进一步介绍如何对文件进行上传和下载。
