上传后显示问题
为什么我上传到了这个位置 然后图片不能显示在网页中
为什么我上传到了这个位置 然后图片不能显示在网页中
2018-08-07
package com.xlr.servlet;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.RandomAccessFile;
import javax.activation.FileDataSource;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class UploadServlet
*/
@WebServlet("/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 req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//从request当中获取流信息
InputStream fileSource = req.getInputStream();
String tempFileName = "E:/tempFile";
//tempFile指向临时文件
File tempFile = new File(tempFileName);
//outputStream文件输出流指向这个临时文件
FileOutputStream outputStream = new FileOutputStream(tempFile);
byte b[] = new byte[1024];
int n;
while((n = fileSource.read(b))!= -1){
outputStream.write(b, 0, n);
}
//关闭输出流和输入流
outputStream.close();
fileSource.close();
//获取上传文件的名称
RandomAccessFile randomFile = new RandomAccessFile(tempFile, "r");
//读取文件第一、二行文件
randomFile.readLine();
String str = randomFile.readLine();
int beginIndex = str.lastIndexOf("=")+2;
int endIndex = str.lastIndexOf("\"");
String filename = str.substring(beginIndex, endIndex);
System.out.println(filename);
//获取内容
//重新定位文件指针到文件头
randomFile.seek(0);
long startPosition = 0;
int i = 1;
//获取文件内容 开始位置
while((n = randomFile.readByte()) != -1 && i <= 4){
if(n == '\n'){
startPosition = randomFile.getFilePointer();
i++;
}
}
startPosition = startPosition - 1;
//获取文件内容 结束位置
randomFile.seek(randomFile.length());
long endPosition = randomFile.getFilePointer();
int j = 1;
while(endPosition >= 0 && j <= 2){
endPosition--;
randomFile.seek(endPosition);
if(randomFile.readByte() == '\n'){
j++;
}
}
endPosition = endPosition - 1;
//设置保存上传文件的路径
String realPath = getServletContext().getRealPath("/")+"images";
// String realPath = "D:\\javaWorkPlace\\downloading\\WebContent\\images";
System.out.println(realPath);
File fileupload = new File(realPath);
//判断文件是否存在。若不存在创建文件
if(!fileupload.exists()){
fileupload.mkdir();
}
File saveFile = new File(realPath,filename);
RandomAccessFile randomAccessFile = new RandomAccessFile(saveFile, "rw");
//从临时文件当中读取文件内容
randomFile.seek(startPosition);
while(startPosition < endPosition){
randomAccessFile.write(randomFile.readByte());
startPosition = randomFile.getFilePointer();
}
//关闭输入输出流、删除临时文件
randomAccessFile.close();
randomFile.close();
tempFile.delete();
//发送上传成功的信号
req.setAttribute("result", "上传成功");
RequestDispatcher dispatcher = req.getRequestDispatcher("jsp/01.jsp");
dispatcher.forward(req, resp);
}
}
<!-- 功能:上传图片并预览
时间:2018/8/7
修改人:小龙人
-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 取出部署的应用程序名 -->
<base href="${pageContext.request.contextPath}/">
<!-- 引入js和css -->
<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">
//图片的预览
$(function(){
//取得图片列表的id并且设置事件
$(".thumbs a").click(function(){
//获取连接地址
var largePath = $(this).attr("href");
//获取地址下的标签
var largeAlt = $(this).attr("title");
//替换图片的地址和标签
$("#largeImg").attr({
src:largePath,
alt:largeAlt,
});
//返回fasle 去除当前页的默认在当前也打开点击图片
return false;
});
//实现图片上传预览
$("#myfile").change(function(){
//$("#previewImg").attr("src","file:///" + $("#myfile").val());
var pv = document.getElementById("previewImg");
// IE5.5~9使用滤镜
if (pv.filters && typeof(pv.filters.item) === 'function'){
pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
}else{
var oFile = document.getElementById('myfile').files[0];
var oReader = new FileReader();
oReader.onload = function(e){
$("#previewImg").attr("src", e.target.result);
};
oReader.readAsDataURL(oFile);
}
});
//实现隐藏显示区域
var la = $("#large");
la.hide();
//实现动态预览
$("#previewImg").mousemove(function(e){
la.css({
//鼠标当前x,y轴
top:e.pageY,
left:e.pageX,
}).html('<img src="'+ this.src +'"/>').show();
}).mouseout(function(){
la.hide();
});
});
</script>
</head>
<body>
<img id="previewImg" alt="" src="images/preview.jpg" width="80" height="80">
<form action="UploadServlet" method="post" enctype="multipart/form-data">
请选择图片:<input id="myfile" name="myfile" type="file"/>
<input type="submit" value="提交"/>${result}
</form>
<!-- pointer-events:none(禁用鼠标效果)解决图片闪烁问题-->
<div id="large" style="pointer-events:none;"></div>
<hr>
<h2>图片预览</h2>
<p style=" border: 1px solid black;display: block;width: 564px;height: 414px;">
<img id="largeImg" src="images/img1-lg.jpg" alt="Large Image"/>
</p>
<p class="thumbs" >
<a href="images/img2-lg.jpg" title="Image2"><img alt="" src="images/img2-thumb.jpg"></a>
<a href="images/img3-lg.jpg" title="Image3"><img alt="" src="images/img3-thumb.jpg"></a>
<a href="images/img4-lg.jpg" title="Image4"><img alt="" src="images/img4-thumb.jpg"></a>
<a href="images/img5-lg.jpg" title="Image5"><img alt="" src="images/img5-thumb.jpg"></a>
<a href="images/img6-lg.jpg" title="Image6"><img alt="" src="images/img6-thumb.jpg"></a>
</p>
</body>
</html>
举报