JQuery专栏之十五————利用文件框控件file实现文件的上传

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