uploadify控件上傳文件and後臺Struts2框架

uploadify是基於jQuery的一種帶進度條的文件上傳控件,下面直接給出操作步驟:

1、到官網下載控件http://www.uploadify.com

2、解壓控件放到項目Webcontent目錄下

3、編寫上傳jsp頁面,首先引入幾個文件,

(1)<link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" />

(2)<script type="text/javascript" src="jquery/1.11.3/jquery.min.js"></script>

(3)<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>

注意:uploadify控件基於jQuery,一定要在jQuery文件之後引入uploadify,否則無效!!!

<input type="file" name="file" id="upload"/>
<button type="button" id="startupload" class="btn btn-primary" style="width:134px;" οnclick="javascript:$('#upload').uploadify('upload','*')">開始上傳</button>
<button type="button" id="cancelupload" class="btn btn-primary" style="width:134px;" οnclick="javascript:$('#upload').uploadify('cancel')">取消上傳</button>

4、編寫js文件,通過$("#upload").uploadify({});引用控件,控件含有很多參數和方法,在此不做一一介紹,主要介紹常容易犯錯的幾個,'swf':解壓包中的uploadify.swf flash文件,'uploader':後臺接收上傳文件的action(如"FileUpLoad.action"),'fileObjName':此處的參數值是Jap頁面中的input name,後臺接收action中定義的文件變量名也必須與此一致,否則接收不到文件。至此前臺代碼編寫工作就完成了。

5,、後臺接收文件我採用Struts2框架。首先創建一個action類FileUpLoadAction,定義四個主要的變量,private File file;private String fileContentType;private String fileFileName;private String savePath;然後在public String execute(){

String root = ServletActionContext.getServletContext().getRealPath(getSavePath());
    InputStream is = new FileInputStream(getFile()); 
       OutputStream os = new FileOutputStream(new File(root, "WebPlugin.exe")); 
    byte[] buffer = new byte[1024];
    int len = 0;
    while((len=is.read(buffer,0,buffer.length))!=-1){
    os.write(buffer,0,len);
    }

is.close();
    os.close();
    return Action.SUCCESS;

}

方法中執行文件接收操作,注意:此操作只是從.tmp臨時文件中讀出文件到保存處,故通過以上幾個變量獲取的都只是臨時文件的信息。

6、最後就是配置Struts.xml文件了,定義一個action,如:

<action name="FileUpLoad" class="com.gmi.client.FileUpLoadAction">
<param name="savePath">/download</param>
<result name="input">/fileupload.jsp</result>
<result name="success">/loadsucc.jsp</result>
</action>

完成以上這些操作就可以實現文件上傳了!!!

但是,uploadify也存在缺陷,採用uploadify控件上傳文件,Firefox瀏覽器存在session丟失的問題。

解決方法:採用'formData'參數向後臺傳遞數據,如session丟失,可以通過該參數向後臺提交sessionID('formData':{"sessionid":sid},)。後臺採用req.getParameter(sessionID);的方式接收數據。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章