1. 程式人生 > >jQuery 非同步上傳外掛 Uploadify 使用 (Java平臺)

jQuery 非同步上傳外掛 Uploadify 使用 (Java平臺)

               

Uploadify是JQuery的一個上傳外掛,實現的效果非常不錯,帶進度顯示。而且是Ajax的,省去了自己寫Ajax上傳功能的麻煩。不過官方提供的例項時php版本的,本文將詳細介紹Uploadify在J2EE中的使用。

1.引入標頭檔案(注意一定要把jQuery放在前面):

注意:uploader是上傳的Action路徑名;formData是傳遞給Action的引數列表。

<script src="lib/jquery-1.8.3.min.js"></script><script src="lib/uploadify/jquery.uploadify.min.js" type="text/javascript"></script><script type="text/javascript">  $(function() {   $('#projectfile').uploadify({    'swf'      : 'lib/uploadify/uploadify.swf',    'uploader' : 'ProjectfileAdd.action',    'formData': {'projectid': '${project.id}'},    'fileObjName' : 'file',    'fileSizeLimit' : '0',    'onQueueComplete' : function(queueData) {              alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');           }       });  });</script>

2.需要上傳的地方新增一個<form>,裡面有一個<input>(注意其id屬性):
<form> <input id="projectfile" name="file" type="file" ></input></form>

3.看一下<input>效果如下,還挺美觀的


4.後臺的Action就是一個普通的上傳檔案的Action,示例如下:

package dc.action.projectfile;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream;import java.sql.Timestamp;import java.util.Date;import java.util.Map;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;import dc.bean.Project;import dc.bean.Projectfile;import dc.bean.User;import dc.service.ProjectService;import dc.service.ProjectfileService;public class ProjectfileAdd extends ActionSupport { private static final int FILE_SIZE=16*1024; private int projectid; private ProjectService projectService; private ProjectfileService projectfileService; private File file; private String fileFileName; private String fileContentType;  public int getProjectid() {  return projectid; } public void setProjectid(int projectid) {  this.projectid = projectid; } public ProjectService getProjectService() {  return projectService; } public void setProjectService(ProjectService projectService) {  this.projectService = projectService; } public ProjectfileService getProjectfileService() {  return projectfileService; } public void setProjectfileService(ProjectfileService projectfileService) {  this.projectfileService = projectfileService; } public File getFile() {  return file; } public void setFile(File file) {  this.file = file; } public String getFileFileName() {  return fileFileName; } public void setFileFileName(String fileFileName) {  this.fileFileName = fileFileName; } public String getFileContentType() {  return fileContentType; } public void setFileContentType(String fileContentType) {  this.fileContentType = fileContentType; } public static int getFileSize() {  return FILE_SIZE; } //寫入檔案時候用到的函式  public void upLoadFile(File source,File target){    InputStream in=null;    OutputStream out=null;    try{     in=new BufferedInputStream(new FileInputStream(source),FILE_SIZE);     out=new BufferedOutputStream(new FileOutputStream(target),FILE_SIZE);     //in-->image-->out     byte[] image=new byte[FILE_SIZE];     while(in.read(image)>0){      out.write(image);     }    }catch(IOException ex){     ex.printStackTrace();    }finally{     try{      in.close();      out.close();     }catch(IOException ex){   ex.printStackTrace();     }    }   }    public String execute() {   try {    Projectfile projectfile=new Projectfile();    projectfile.setName(fileFileName);    Project project=projectService.ReadByID(projectid);    projectfile.setProject(project);    projectfile.setModifytime( new Timestamp(new Date().getTime()));    String filepath="file/"+project.getId()+"/"+fileFileName;    projectfile.setFilepath(filepath);    projectfile.setFilesize(file.length());    //不是連線到外網的檔案    projectfile.setFilelink(0);    projectfile.setContenttype(fileContentType);    //--記錄編輯人------------------    ActionContext context = ActionContext.getContext();    Map sessionMap = context.getSession();    User currentuser=(User)sessionMap.get("user");    projectfile.setUser(currentuser);    //------------------------------    //projectfile.setFilesize(1);    projectfileService.save(projectfile);    //檔案上傳,存至硬碟    //ServletActionContext.getServletContext().getRealPath獲得webRoot絕對路徑    String realfilePath=ServletActionContext.getServletContext().getRealPath("file")      +"/"+project.getId()+"/"+this.fileFileName;    File targetFile=new File(realfilePath);    targetFile.getParentFile().mkdirs();    upLoadFile(file,targetFile);   } catch (Exception ex) {    ex.printStackTrace();    return ERROR;   }   return SUCCESS;  }}

Uploadify官方網站:http://www.uploadify.com/