js文件:
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK" import="entity.*"%>
<!DOCTYPE html>
<html>
<head>
<title>添加商品</title>
<style>
#lo{
width: 200px;
height:200px;
box-sizing:border-box;
background-color:aquamarine;
margin: auto;
}
</style>
<style>
body{
text-align: center;
line-height: 50px;
}
</style>
</head>
<body id="lo">
<form action="add_products" method="post" enctype="multipart/form-data">
<b>商品名称</b><input name="pname" value=><br>
<b>商品介绍</b> <textarea name="pintro" rows="20" cols="20"></textarea><br>
<b>商品单价</b> <input name="pprice" value=><br>
<%-- <div>
<img id="preview" alt="预览图片">
</div>--%>
<b> 商品图片</b><input type="file" name="ppricurl " id="fileInput" accept="image/*"><br>
<div> <img id="preview" src="#" alt="预览图片" width="109" height="127" ></div>
<p>
<div>
<button type="submit" onclick="return confirm('是否提交?')">提交</button>
<button type="reset" onclick="return confirm('是否重置?')">重置</button>
</div>
</p>
</form>
<%--图片预览功能实现--%>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
var preview = document.getElementById('preview');
if (file) {
// 清除之前的预览
preview.src = "";
reader.onloadend = function() {
// 设置预览图片的src属性为文件内容
preview.src = reader.result;
};
// 确保是图片文件
if (file.type.match('image.*')) {
// 读取文件内容
reader.readAsDataURL(file);
} else {
alert('请选择一个图片文件!');
}
}
});
</script>
</body>
</html>
重点代码1
<form action="add_products" method="post" enctype="multipart/form-data">
重点代码2
<%--图片预览功能实现--%>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
var preview = document.getElementById('preview');
if (file) {
// 清除之前的预览
preview.src = "";
reader.onloadend = function() {
// 设置预览图片的src属性为文件内容
preview.src = reader.result;
};
// 确保是图片文件
if (file.type.match('image.*')) {
// 读取文件内容
reader.readAsDataURL(file);
} else {
alert('请选择一个图片文件!');
}
}
});
</script>
Servlet
package servlet;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import org.apache.tomcat.util.http.fileupload.*;
import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
import org.apache.tomcat.util.http.fileupload.servlet.*;
import entity.Product;
import service.*;
@WebServlet(name = "aes", urlPatterns = { "/add_products" })
public class ProductaddServlet extends HttpServlet {
private static final String UPLOAD_DIRECTORY = "uploads";
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("GBK");//设置接收数据的字符集为中文
FileUpload fu = new FileUpload();
fu.setFileItemFactory(new DiskFileItemFactory());
try {
IProductService ps=new ProductServiceImpl();
// List<FileItem> inputs =
// fu.parseRequest(request);//旧版Tomcat写法,新版不支持
List<FileItem> inputs = fu.parseRequest(new ServletRequestContext(request));
// 获取每个输入框的数据
String name = inputs.get(0).getString("GBK");
String intro = inputs.get(1).getString("GBK");
String priceStr = inputs.get(2).getString();
double price = Double.parseDouble(priceStr);
//截取文件名
String pricurl = inputs.get(3).getName();
System.out.println(pricurl);
//获取本地文件路径
String path="D:\\ja\\rpq\\web\\img\\";
//获取远程服务器的文件路径
path+=pricurl;
//创建远程服务器的文件对象,并上传到服务器
inputs.get(3).write(new File(path));
ps.adder(name,intro,price,pricurl);
response.sendRedirect("product_list");
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}
重点代码1
request.setCharacterEncoding("GBK");//设置接收数据的字符集为中文
FileUpload fu = new FileUpload();
fu.setFileItemFactory(new DiskFileItemFactory());
try {
IProductService ps=new ProductServiceImpl();
// List<FileItem> inputs =
// fu.parseRequest(request);//旧版Tomcat写法,新版不支持
List<FileItem> inputs = fu.parseRequest(new ServletRequestContext(request));
// 获取每个输入框的数据
String name = inputs.get(0).getString("GBK");
String intro = inputs.get(1).getString("GBK");
String priceStr = inputs.get(2).getString();
double price = Double.parseDouble(priceStr);
//截取文件名
String pricurl = inputs.get(3).getName();
System.out.println(pricurl);
//获取本地文件路径
String path="D:\\ja\\rpq\\web\\img\\";
//获取远程服务器的文件路径
path+=pricurl;
//创建远程服务器的文件对象,并上传到服务器
inputs.get(3).write(new File(path));
ps.adder(name,intro,price,pricurl);
response.sendRedirect("product_list");
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
throw new RuntimeException(e);
}
上述代码是实现购物网站中添加商品功能:
有不懂的或者需要全部源代码的可以私信或评论