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]; // 获取文件对象