jsp中无刷新上传图片(前台使用jquery+ajaxfileupload),后台用commons-fileupload处理
需求:前台选择图片，页面显示上传后的图片地址
代码一:ajaxUploadImg.jsp
请百度搜索，并下载jquery.js 及 ajaxfileupload.js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>">
<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="styles.css">
-->
<script language="javascript" src="<%=basePath%>js/jquery.js" ></script>
<script language="javascript" src="<%=basePath%>js/ajaxfileupload.js" > </script>
<script language="javascript" type="text/javascript" src="<%=basePath%>js/ezeditor.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来
$.ajaxFileUpload({
url:'<%=basePath %>FileUpload', //需要链接到服务器地址
secureuri:false,
fileElementId:'uploadFileInput', //文件选择框的id属性
dataType: 'json', //服务器返回的格式，可以是json
success: function (data, status) //相当于java中try语句块的用法
{
//alert(data); //data是从服务器返回来的值
$('#result').html('上传图片成功!请复制图片地址<br/>'+data.src);
},
error: function (data, status, e) //相当于java中catch语句块的用法
{
$('#result').html('上传图片失败');
}
}
);
}
</script>
</head>
<body>
<div id="result" style="FONT:12px 宋体"></div><br/>
<img id="loading" src="loading.gif" style="display:none;">
<form name="form_uploadImg" action="" method="POST" enctype="multipart/form-data">
<input id="uploadFileInput" type="file" size="45" name="uploadFileInput" class="input" />
<input type="button" id="buttonUpload" onclick="return ajaxFileUpload();" value="上传图片"/>
</form>
</html
代码二: FileUpload.java
这里使用了commons-fileupload-1.2.1.jar的包，可以自行搜索下载
如果使用myeclipse，可以直接在Struts 2 Core Libraies中找到.
commons-fileupload-1.2.1.jar
package com.lz.servlet;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
public class FileUpload extends HttpServlet {
public FileUpload() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
String realDir = request.getSession().getServletContext().getRealPath("");
String contextpath = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ contextpath + "/";
try {
String filePath = "uploadfiles";
String realPath = realDir+"\"+filePath;
//判断路径是否存在，不存在则创建
File dir = new File(realPath);
if(!dir.isDirectory())
dir.mkdir();
if(ServletFileUpload.isMultipartContent(request)){
DiskFileItemFactory dff = new DiskFileItemFactory();
dff.setRepository(dir);
dff.setSizeThreshold(1024000);
ServletFileUpload sfu = new ServletFileUpload(dff);
FileItemIterator fii = null;
fii = sfu.getItemIterator(request);
String title = ""; //图片标题
String url = ""; //图片地址
String fileName = "";
String state="SUCCESS";
String realFileName="";
while(fii.hasNext()){
FileItemStream fis = fii.next();
try{
if(!fis.isFormField() && fis.getName().length()>0){
fileName = fis.getName();
Pattern reg=Pattern.compile("[.]jpg|png|jpeg|gif$");
Matcher matcher=reg.matcher(fileName);
if(!matcher.find()) {
state = "文件类型不允许！";
break;
}
realFileName = new Date().getTime()+fileName.substring(fileName.lastIndexOf("."),fileName.length());
url = realPath+"\"+realFileName;
BufferedInputStream in = new BufferedInputStream(fis.openStream());//获得文件输入流
FileOutputStream a = new FileOutputStream(new File(url));
BufferedOutputStream output = new BufferedOutputStream(a);
Streams.copy(in, output, true);//开始把文件写到你指定的上传文件夹
}else{
String fname = fis.getFieldName();
if(fname.indexOf("pictitle")!=-1){
BufferedInputStream in = new BufferedInputStream(fis.openStream());
byte c [] = new byte[10];
int n = 0;
while((n=in.read(c))!=-1){
title = new String(c,0,n);
break;
}
}
}
}catch(Exception e){
e.printStackTrace();
}
}
response.setStatus(200);
String retxt ="{src:'"+basePath+filePath+"/"+realFileName+"',status:success}";
response.getWriter().print(retxt);
}
}catch(Exception ee) {
ee.printStackTrace();
}
}
public void init() throws ServletException {
// Put your code here
}
}