1.表单设置
表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码,
是上传二进制数据的方式,所以form里面的input的值以二进制的方式传过去的。
只有使用了multipart/form-data,才能完整的传递文件数据【制定传输数据的特殊类型,上传非文本的内容】
method必须指定为post
<form action="doupload2.jsp" method="post" enctype="multipart/form-data">
昵称:<input type="text" name="Name"><br/>
<input type="file" name="File"><br/>
<input type="submit" value="上传">
</form>
2.CKEditor 文本域中的值获取到的总是空
解决:
<script type="text/javascript">
function saveNews(){
CKupdate(); //在提交表单前需要做处理
//获得用于拼接在url的参数字符串
var queryString=$("form").serialize();
//发送ajax请求,获得json数据【请求的地址,连同请求发送的数据,请求成功时运行的函数】
$.getJSON("../newsServlet?action=add",queryString,callback);
function callback(data){//接收json对象【服务端写入的json数据】
if(data.flag=="true"){
alert("添加成功!");
location.href="../findServlet";
}else{
alert("添加失败!");
}
}
}
//处理CKEDITOR的值
function CKupdate() {
for (instance in CKEDITOR.instances){
CKEDITOR.instances[instance].updateElement();
}
}
</script>
3.去除CKEditor自带的标签
1)直接更改编辑器默认模式为源代码模式,在ckeditor目录下的config.js添加以下配置:
config.startupMode = ‘source';
2)使用过程中单击源码后再输入内容即可
★4.Eclipse下Tomcat项目部署路径问题(.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps)
先清除原来的tomcat,否则一直处于禁选状态!
修改默认的配置为:
5.跳转到上传成功页面,控制台也没有报错,但是刷新WebContent文件夹,目录中没有上传的文件。
原因在于:
项目提示文件上传成功后,是将文件上传到了发布路径下({workspace}.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\project_upload),而不是开发路径中。
我们需要对Tomcat服务器进行以下更改,便可上传至工程中:
注意:如果两个都勾选,其中第一个会使得之后访问servlet时报404,第二个没有影响。另外,让图片保存在当前工程里,只勾选第一个就行;保存在服务器,只勾选第二个就行。不做任何勾选,就保存在服务器。为了避免报错,所以建议不去勾选,保存在服务器即可。
修改Tomcat服务器配置后,重新发布项目,执行后,可在WebContent文件夹下,找到我们创建的目录及上传的文件:
6.jsp中,<% %>和<%! %>
<% %>相当于在方法内,且和<% %>在同一块中,只不过是进行了"分段",可以互访变量值;
<%! %>相当于在类中方法外,用于声明全局变量和方法。
相关代码
doupload.jsp
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Iterator"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ 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>处理文件上传</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String uploadFileName="";//上传的文件名
String fieldName="";//表单字段元素的name属性值
//请求信息中的内容是否是multipart类型
boolean isMultipart=ServletFileUpload.isMultipartContent(request);
//上传文件的存储路径(项目路径/upload/)
String uploadFilePath=request.getSession().getServletContext().getRealPath("upload/");
if(isMultipart){
FileItemFactory factory=new DiskFileItemFactory();//创建一个磁盘文件项工厂实例
ServletFileUpload upload=new ServletFileUpload(factory);
try{
//解析form表单中所有表单项
List<FileItem> items=upload.parseRequest(request);
Iterator<FileItem> iter=items.iterator();
while(iter.hasNext()){
FileItem item=(FileItem)iter.next();
if(item.isFormField()){//判断是否为普通表单项
fieldName=item.getFieldName();
if(fieldName.equals("user")){
//输出表单字段的值
out.print(item.getString("utf-8")+"上传了文件。<br/>");
}
}else{//文件表单项
String fileName=item.getName();//获得文件表单项name属性的值
if(fileName!=null&&!fileName.equals("")){
File fullFile=new File(item.getName());
File saveFile=new File(uploadFilePath,fullFile.getName());
item.write(saveFile);
uploadFileName=fullFile.getName();
out.print("上传成功后的文件名是:"+uploadFileName);
}
}
}
}catch(Exception e){
e.printStackTrace();
}
}
%>
显示的图片:<img src="upload/<%=uploadFileName %>"/>
<%
%>
</body>
</html>
doupload2.jsp
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ 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>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");//设置请求中的字符编码
DiskFileItemFactory dfif=new DiskFileItemFactory();//创建磁盘文件项工厂实例
ServletFileUpload fileupload=new ServletFileUpload(dfif);//创建解析对象,依赖于工厂实例
fileupload.setFileSizeMax(1024*1024*10);//设置上传文件的最大值10MB,单位:字节
try{
List<FileItem> fileList=fileupload.parseRequest(request);//解析request对象,把表单中的每一个输入项包装成一个fileItem对象,并返回一个保存了所有FileItem的list集合
for(FileItem item:fileList){//遍历每一个表单项
if(item.isFormField()){//判断该表单项是否为普通表单项
String name=item.getFieldName();//获得普通表单项的name属性的值
String value=item.getString("utf-8");//将表单项中保存的数据流内容以指定编码格式返回【普通表单项就是value属性值】
System.out.println(name+":"+value);
}else{//文件表单项
String fileName=item.getName();//获得文件表单项name属性的值
fileName=fileName.substring(fileName.lastIndexOf("\\")+1);//截取全路径中的文件名称部分
long size=item.getSize();//获得上传文件的大小
String path="e:/images/"+fileName;//拼接存储路径,包含文件名称
File f=new File(path);//创建指定路径的文件实例
item.write(f);//上传文件写入指定路径
System.out.println("上传成功!");
}
}
}catch(Exception e){
e.printStackTrace();
}
%>
</body>
</html>
index2.jsp
<%@ 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>实现文件上传</title>
</head>
<body>
<!--
表单中enctype="multipart/form-data"用于制定传输数据的特殊类型,上传非文本的内容,同时,method必须指定为post
-->
<form action="doupload2.jsp" method="post" enctype="multipart/form-data">
昵称:<input type="text" name="nickName"><br/>
<input type="file" name="File"><br/>
<input type="submit" value="上传">
</form>
</body>
</html>
upload.jsp
<%@ 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>上传文件到项目下</title>
</head>
<body>
<form action="doupload.jsp" enctype="multipart/form-data" method="post">
<p>姓名:<input type="text" name="user"/></p>
<p>选择图片:<input type="file" name="nfile"/></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>