文件上传+CKEditor注意事项

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>

 

猜你喜欢

转载自blog.csdn.net/wxd772113786/article/details/103490286
今日推荐