如今一作东西就少不了,上传这个,上传那个的,那么,个人构想是,servlet去上传到服务器,也就是你指定的文件夹里面,而后,在根据用户最终肯定以后,在上传到数据库里面。javascript
环境:web项目,包:commons-fileupload-1.2.1.jar,commons-io-1.4.jarcss
JAVA核心代码 html
//这是上传java
package com.upload.action;jquery
import java.io.File;
import java.io.IOException;
import java.util.List;web
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;ajax
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;数据库
public class UploadServlet extends HttpServlet {apache
private static final long serialVersionUID = 2121906815386996943L;服务器
@SuppressWarnings("unchecked")
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//初始化 FileItemFactory
FileItemFactory factory = new DiskFileItemFactory();
// 初始化ServletFileUpload,能够说是一个封装好的的容器
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List<FileItem> list = upload.parseRequest(request);
for (int i = 0; i < list.size(); i++) {
FileItem fileItem = list.get(i);
//根据你想要的如XX.jpg等,来截取字符串
String name = fileItem.getName().substring(fileItem.getName().lastIndexOf("\\") + 1);
//保存,别说你不知道是什么。。。。
request.getSession().setAttribute(name, true);
fileItem.write(new File("d:/upload/" + name));
//这是上传图片的名字,若是只规定上传一次的话,那么直接拿这个name,若是比较多的话,那么。。。考虑中
System.out.println(name);
}
//方法1、直接放入集合中,而后循环读出放入数据库(放一个图片就当即入库)
//方法2、再写一个servlet,而后直接读出upload下的子文件夹,放入数据库(在确认这些图片的状况下,不进行改动的状况下再去入库)
//考虑到可移植性的问题,那么采起方法二
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
}
//这是删除
package com.upload.action;
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class DeleteServlet extends HttpServlet {
private static final long serialVersionUID = -4097655768318294837L;
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String fileName = request.getParameter("fileName");
if(fileName != null) {
boolean exist = false;
try{
exist = (Boolean) request.getSession().getAttribute(fileName);
}catch(Exception e) {
return;
}
if(exist) {
File file = new File("d:/upload/" + fileName);
if(file.exists()) {
file.delete();
}
request.getSession().removeAttribute(fileName);
}
}
}
}
jsp页面 能够说是HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<style type="text/css">
.deleteImg {
cursor: pointer;
}
#uploaddiv img {
margin-left: 20px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js"></script>
<script type="text/javascript">
var uploadIndex = 1;
$(function() {
uploadIt();
deleteFile();
});
function uploadIt() {
//最流行的jQuery,若是看不懂,那么 sorry,这里主要是上传。
$(".uploadAndNext").click(function() {
var uploadId = "#" + $(this).attr("id");
var btn = $(this);
new AjaxUpload( uploadId + "" , {
action : "UploadServlet" ,
onChange: function(file, extension){
$(uploadId + "").parent().find("input")[0].value = file;
$(uploadId + "").parent().find(".uploadAndOkImg").show().attr("src" , "images/spinner.gif");
btn.attr("disabled" , "disabled");
},
onComplete: function(file, response) {
$(uploadId + "").parent().find(".uploadAndOkImg").attr("src" , "images/ok.gif");
$(uploadId + "").parent().find(".deleteImg").attr("src" , "images/delete.gif").show();
uploadIndex++;
$("#uploaddiv").append("<div><input type='text' /><button class='uploadAndNext' id='upload" + uploadIndex + "'>浏览</button><img src='' width='20px' height='20px' class='uploadAndOkImg' style='display:none'/><img src='' width='20px' height='20px' class='deleteImg' style='display:none' alt='删除'/></div>");
uploadIt();
deleteFile();
}
});
});
}
function deleteFile() {
$("#uploaddiv .deleteImg").click(function() {
var fileName = $(this).parent().find("input").val();
var thisObj = $(this);
$.post("DeleteServlet" , {
"fileName" : fileName
},
function(data) {
thisObj.parent().remove();
}
);
});
}
//算了,仍是提示一下,是jQuery的Ajax,OK?
</script>
</head>
<body>
<div id="uploaddiv">
<div><input type="text" /><button class="uploadAndNext" id="upload1">浏览</button><img src="" width="20px" height="20px" class="uploadAndOkImg" style="display: none"/><img src="" width="20px" height="20px" class="deleteImg" style="display:none;" alt="删除"/></div>
</div>
</body>
</html>
注:有点很差使,可是学习完以后,你能够本身创做。这只是个案例。
转:http://liuyang-1989xy.blog.163.com/blog/static/1687545732010111061145523/