在做大作业时遇到了需要上传图片的场景，把使用方法记录下来。首先准备工作，使用servlet作为后台处理需要的jar包有commons-fileupload-1.3.2、commons-io-2.5.jar，可以去我的网盘下载https://pan.baidu.com/s/12SUmVJo3nDCNucTSQFlTSw
需要的js文件，jquery和ajaxfileupload.js，链接--->https://pan.baidu.com/s/1UcBcuYl06UGabFoZfAx89g
jsp页面当中，只写了一个带有文件选择的表单，可以调用文件资源管理选择文件即可。js部分的代码使用了ajaxFileUpload提供的方法，将处理的servlet路径，文件格式写明，表单enctype="multipart/form-data"，这样把需要上传的文件以二进制的形式传递。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<script type="text/javascript">
function ajaxFileUpload()
{
console.log("file upload");
$.ajaxFileUpload({
url:'<%=basePath %>UploadServlet', //需要链接到服务器地址
secureuri : false,
fileElementId : 'uploadFileInput',
dataType : 'json',
success : function(data, status)
{
console.log(status);
console.log(data);
var parsedJson = jQuery.parseJSON(msg);
//$('#result').html('上传图片成功!请复制图片地址<br/>' + parsedJson.src);
},
error : function(data, status, e)
{
//$('#result').html('上传图片失败');
}
});
}
</script>
</head>
<%@ page import="java.util.*,java.io.*" %>
<body>
<body>
<div id="result" style="FONT:12px 宋体"></div><br/>
<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>
<hr>
<p id="result">
</p>
</body>
</body>
</html>后台servlet：需要得到当前网站在真实路径、以及使用url访问时的路径，在servlet当中输出了一下，图片根据时间戳重命名。
package cn.test;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Date;
import java.util.List;
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.FileItem;
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;
/**
* Servlet implementation class UploadServlet
*/
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
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;
System.out.println("realpath: "+realPath);
System.out.println("----------------");
//判断路径是否存在，不存在则创建
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}";
System.out.println("可以通过这个地址直接访问上传的图片："+retxt);
response.getWriter().print(retxt);
}
}catch(Exception ee) {
ee.printStackTrace();
}
}
}
效果图：
这是jsp页面的效果图，没什么特别的，选择文件点击上传按钮即可。
看servlet中的输出。在servlet中获取realpath时传递的参数为空字符串，获得的也就是当前网站的realpath，realpath为D:\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\test\uploadfiles，也就是我们在电脑硬盘的这个位置就可以找到我们上传的图片。
同时得到的src为http://localhost:8080/test/uploadfiles/1547017322411.jpg，也就是你在浏览器中输入这个地址就可以看到这张图片，如下面图片所示。
所以，我们将上传的图片通过一个<img>标签显示的时候也就明确了img的src属性要写哪一个路径。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
