思路
不管是用form方式还是ajax方式提交，原理都是在后台新建一个文件夹专门放图片/文件，把文件的名字存到数据库中
通过form提交
html部分：input框type选file，enctype选multipart/form-data（用二进制方式传输）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style="width:50%;margin: 0 auto;padding:100px;">
<form action="/WebNewLearn/UploadServlet2" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit">
</form>
</div>
</body>
</html>
servlet部分：步骤：先定义两个变量存储图片的名字和路径，判断数据传输的方式是否是二进制类型，如果不是，直接返回。
设置文件大小，多个文件的总大小，监听器等
把request请求拆解开放到一个集合里，然后遍历该集合
如果某一个元素是图片/文件类型，先获取到它的名字，创建图片所存放的文件夹，给图片名字加一个随机数，然后定义一个输入流，把图片内容读取到流中，（注意判断文件夹是否存在），创建一个空文件。
创建一个输出流，把图片内容输入到文件中，关闭流
如果元素不是图片，直接记录内容
把内容和图片的标题存储到数据库中
如果是jsp形式可以用
request.setAttribute("data", showUtil);
request.getRequestDispatcher("FirstJsp.jsp").forward(request, response);
的形式来跳转和传输数据。
package com.MyNewLearn.web;
import java.io.IOException;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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;
import com.MyNewLearn.db.MysqlUtil;
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("/UploadServlet2")
public class UploadServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadServlet2() {
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
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
//设置请求和响应的编码格式
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=UTF-8");
resp.setCharacterEncoding("utf-8");
//表单
String myFile = "";
String parentDir="";
//核心Api
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload fileUpload = new ServletFileUpload(factory);
//判断是否是muitipart/form-data类型
if(!ServletFileUpload.isMultipartContent(req)) {
//resp.getWriter().println("表单的enctype属性不是multipart/form-data类型");
System.out.println("表单的enctype属性不是multipart/form-data类型");
return;
}
//设置单个文件上传大小 8M
fileUpload.setFileSizeMax(8*1024*1024);
//设置总上传文件大小(有时候一次性上传多个文件，需要有一个上限,此处为60M)
fileUpload.setSizeMax(60*1024*1024);
//设置上传监听器[参数为自定义的监听器]
// fileUpload.setProgressListener(new ListenerUploadProgress());
//解析请求
try {
//把request拆解开放到list集合里
List<FileItem> parseRequest = fileUpload.parseRequest(req);
//获取数据
for (FileItem fileItem : parseRequest) {
//判断数据类型是不是普通的form表单字段
if(!fileItem.isFormField()) {
//上传文件
String fileName = fileItem.getName();
InputStream fileStream = fileItem.getInputStream();
//定义保存的父路径（服务器部署相对的绝对路径）
parentDir = this.getServletContext().getRealPath("/upload");
//定义绝对路径
//String parentDir = "D:\\eclipse-workspace-new\\myWish\\WebContent\\upload";
//使用UUID+文件名的方式，避免文件重名
String realFileName = UUID.randomUUID().toString()+"-"+fileName;
//创建要保存的文件
File file = new File(parentDir,realFileName);
//判断文件夹是否存在
if(!file.getParentFile().exists()) {
//创建文件夹[多级文件夹]file.madir是创建单一文件夹
file.getParentFile().mkdirs();
}
//创建输出流
OutputStream out = new FileOutputStream(file);
//创建字节缓存
byte[] buffer = new byte[1024];
int len = -1;
//一次读取1kb(1024byte),返回-1表明读取完毕
while((len = fileStream.read(buffer))!=-1) {
//一次写入1kb(1024byte)
out.write(buffer,0, len);
}
System.out.println(parentDir);
System.out.println(realFileName);
myFile = realFileName;
//冲刷流资源
out.flush();
//关闭流
out.close();
fileStream.close();
}else {
//普通字段
//字段名
String fieldName = fileItem.getFieldName();
//字段值中文乱码
String fieldValue = fileItem.getString("UTF-8");
System.out.println(fieldName+":"+fieldValue);
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
if(!myFile.equals("")) {
String sql1 = "insert into img(imgUrl) values(\""+myFile+"\")";
int flag = MysqlUtil.update(sql1);
}
}
}
jsp页面遍历结果
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script>
function (){
var url=window.location.href;
alert(url.split("?")[1].split("=")[1]);
//url.split是指把该字符串分割，以参数为界限，分割成数组
}
</script>
<table border="1">
<tr>
<th>编号</th>
<th>标题</th>
<th>分类</th>
<th>作者</th>
<th>内容摘要</th>
<th>操作</th>
</tr>
<!-- c标签用于遍历 ${data}代表从servlet定义的数据 -->
<c:forEach items="${data}" var="d">
<tr>
<th>${d[0]}</th>
<th>${d[1]}</th>
<th>${d[2]}</th>
<th>${d[3]}</th>
<th>${d[4]}</th>
<th>${d[5]}</th>
</tr>
</c:forEach>
</table>
</body>
</html>
ajax部分
三个重点：
1.把所有需要传输的数据放到一个form然后封装到一个对象中 var data = new FormData($("#myForm")[0]);
2.设置属性：contentType:false
3.设置属性：processData: false
$("#add").click(function(){
var username = $("#username").val();
var age = $("#age").val();
var info = $("#info").val();
var createDate = $("#createDate").val();
var dept = $("#dept").val();
var myfile = $("#myfile").val();
var data = new FormData($("#myForm")[0]);
if(username!=""&&myfile!=""&&age!=""&&info!=""&&createDate!=""){
//loading层
var index1 = layer.load(0, {
shade: [0.2,'#000'] //0.1透明度的白色背景
});
$.ajax({
url:"/myWish/UploadServlet",
async:true,
type:"post",
data:data,
// data:{
// "username":username,
// "age":age,
// "info":info,
// "createDate":createDate,
// "myfile":myfile,
// "dept":dept
// },
contentType:false,
processData: false,
success:function(data){
if(data==1){
layer.close(index1)
init();
$("#username").val("");
$("#age").val("");
$("#info").val("");
$("#createDate").val("");
$("#myfile").val("");
}
else{
layer.close(index1)
layer.alert("添加失败",{icon: 2});
}
},
error:function(error){
layer.close(index1)
layer.alert("请求失败",{icon: 2});
}
})
}else{
layer.msg("信息没有输入完全")
}
})
6410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
