15. 利用文件框控件file实现文件的上传。
文件上传的方法有很多，jQuery也有许多文件上传控件。本例采用最基本的HTML文件框（<input type='file'）实现文件上传，不限制上传文件的类型和大小。具体地，在表单myForm1中添加一个学生组合框，每个学生可以上传一个照片的图形文件到服务器端，图形文件以学号命名。点击“上传”按钮后，客户端调用服务器端程序Easyui_fileUpload.jsp文件。当文件上传成功后，通过调用 myresizeImage()函数将图形等比例缩放后在表单规定位置中显示出来。客户端程序实现的主要方法如下：
①使用jsp语句获取工程文件路径，在javascript中获取此值，以便设置照片上传后在服务器端存放的路径。
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+
request.getServerPort()+path+"/";
%>
<script>
var photopath='<%=basePath %>'+'mybase/students/';
…
</script>
②定义表单、学号组合框及图片等控件。
③在表单myForm1中添加一个文件选择框控件file1（input type="file"），同时添加一个“上传”按钮。绑定file1控件的change事件，只有当选择的文件为非空时，“上传”按钮才处理激活状态。编写“上传”按钮的点击事件，点击调用fnUpload()函数开始上传文件。
$("#myForm1").append('<input type="file" id="file1" style="position: absolute; top:260px; left:16px;
width: 200px; padding-left: 4px;" />');
myButton('btnupload','myForm1','上传',260,440,25,65,'uploadIcon','');
$('#file1').bind('change',function(v){
var filename = $("#file1").val();
if (filename=='') $("#btnupload").linkbutton('disable');
else $("#btnupload").linkbutton('enable');
});
$('#btnupload').bind('click',function(e){ //绑定“上传”按钮的点击事件
fnUpload();
});
④编写fnUpload()程序。先获取文件扩展名并作判断，然后使用FormData()方法和XMLHttpRequest对象，调用后台服务器端程序system//Easyui_fileUpLoad.jsp，将目标文件名和照片文件存放路径两个参数传递给该程序。服务器端上传文件成功后，返回文件的有关信息（如文件大小、文件扩展名等），并将文件选择控件置空、“上传”按钮为未激活状态，结束文件上传过程。由于游览器缓存图片，新上传的图片不能马上在客户端显示出来，需要在图片地址src中添加一个时间戳（timestemp）。
var fileext=filename.substring(filename.lastIndexOf(".")+1,255).toLowerCase();//文件扩展名
var fileObj = $("#file1")[0].files[0]; // 获取文件对象
var form = new FormData(); // FormData 对象
form.append("file", fileObj);// 文件对象
var xhr = new XMLHttpRequest(); //XMLHttpRequest 对象
xhr.open("post", "system//Easyui_fileUpLoad.jsp?targetname="+targetname+"&targetpath=mybase/students", true);
xhr.onload = function () {
if(xhr.status == 200){
var data = JSON.parse(xhr.responseText);
if (data.error == 0) { //上传成功
var src=photopath+$("#stuid").combobox("getValue")+'.jpg?timestemp='+
new Date().getTime();
$("#image1").attr('src',src);
resizeImage('image1',src,231,224);
$.messager.show({
title:'系统提示',
width:200,
msg:'文件已经上传成功!',
timeout:2000,
showType:'slide'
});
console.log('文件上传成功!'+src+'，文件大小：'+data.filesize);
}else{
$.messager.alert('系统提示','文件已上传失败！','error');
console.log(data.message);
}
$("#file1").val(' ');
}
};
xhr.send(form);
程序2-15. 文件上传服务器端程序Easyui_fileUpLoad.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.io.*"%>
<%@ page import="net.sf.JSON.JSONObject"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String targetpath = request.getParameter("targetpath"); //目标路径
String targetname = request.getParameter("targetname"); //目标文件名称
System.out.println("target="+targetpath);
String savePath = this.getServletContext().getRealPath(targetpath);
File file = new File(savePath);
//判断上传文件的保存目录是否存在
if (!file.exists() && !file.isDirectory()) {
System.out.println(savePath+"目录不存在，需要创建");
file.mkdir(); //创建目录
}
String message = ""; //消息提示
int error = 0;
String targetfilename="";
String fileext="";
long xsize=0;
try{
//使用Apache文件上传组件处理文件上传步骤：
//1、创建一个DiskFileItemFactory工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//2、创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory);
//解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
//3、判断提交上来的数据是否是上传表单的数据
if(!ServletFileUpload.isMultipartContent(request)){
//按照传统方式获取数据
return;
}
//4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，
//每一个FileItem对应一个Form表单的输入项
List<FileItem> list = upload.parseRequest(request); //compiler5.0级以上支持
for(FileItem item : list){
//如果fileitem中封装的是普通输入项的数据
if(item.isFormField()){
String name = item.getFieldName();
//解决普通输入项的数据的中文乱码问题
String value = item.getString("UTF-8");
//value = new String(value.getBytes("iso8859-1"),"UTF-8");
System.out.println(name + "=" + value);
}else{//如果fileitem中封装的是上传文件
//得到上传的文件名称和扩展名
String filename = item.getName();
fileext=filename.substring(filename.lastIndexOf(".")+1,filename.length()).toLowerCase();
targetfilename=filename;
if (!targetname.trim().equals("")) targetfilename=targetname+"."+fileext; //目标文件名
if(filename==null || filename.trim().equals("")){
continue;
}
//注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如：c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
//处理获取到的上传文件的文件名的路径部分，只保留文件名部分
filename = filename.substring(filename.lastIndexOf("\\")+1);
//获取item中的上传文件的输入流
InputStream in = item.getInputStream();
//创建一个文件输出流
//FileOutputStream out1 = new FileOutputStream(savePath + "\\" + filename);
FileOutputStream out1 = new FileOutputStream(savePath + "\\" + targetfilename);
//创建一个缓冲区
byte buffer[] = new byte[1024];
//判断输入流中的数据是否已经读完的标识
int len = 0;
//循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
while((len=in.read(buffer))>0){
//使用FileOutputStream输出流
//将缓冲区的数据写入到指定的目录(savePath + "\\" + filename)当中
out1.write(buffer, 0, len);
}
in.close(); //关闭输入流
out1.close(); //关闭输出流
item.delete(); //删除处理文件上传时生成的临时文件
message = "文件上传成功！";
File xfile = new File(savePath + "\\" + targetfilename);
xsize=xfile.length();
}
}
}catch (Exception e) {
message= "文件上传失败！";
error = 1;
e.printStackTrace();
}
//确定返回内容JSON格式
Map map = new HashMap();
map.put("error", error);
map.put("message", message);
map.put("targetfilename", targetfilename);
map.put("fileext", fileext);
if (xsize<=1024) map.put("filesize", xsize+"B");
else if (xsize<=1024*1000) map.put("filesize", xsize/1024.00+"KB");
else map.put("filesize", xsize/1024/1024.00+"MB");
JSONObject JSON = JSONObject.fromObject(map);
response.setContentType("text/html; charset=utf-8");
PrintWriter pw = response.getWriter();
System.out.print(JSON.toString());
pw.write(JSON.toString());
%>