jQuery 非同步上傳外掛 Uploadify 使用 (Java平臺)
阿新 • • 發佈:2018-12-22
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/