Struts2 + jquey.uploadify 實現無刷新帶進度條上傳

原創

2020-02-22 06:30

首先新建一個Struts2 的項目。

創建一個Action用來處理文件上傳 UploadAction.action

package com.fileUpload.Action; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; import java.util.Date; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; public class UploadAction extends ActionSupport { /** * */ private static final long serialVersionUID = 2854105381965508552L; private static final int BUFFER_SIZE = 20 * 1024; // 20K private File myFile; // 與頁面 <input type="file"> 控件的 name 保持一致 private String fileName; // private String contentType; public File getMyFile() { return myFile; } public void setMyFile(File myFile) { this.myFile = myFile; } public String getFileName() { return fileName; } // 是setMyFileFileName而不是setFileName 。 struts2的規則。MyFile 是上面private File // myFile public void setMyFileFileName(String fileName) { this.fileName = fileName; } public String getContentType() { return contentType; } // 同上 public void setMyFileContentType(String contentType) { this.contentType = contentType; } public String execute() { String newFileName = new Date().getTime() + getExtention(fileName); File imageFile = new File(ServletActionContext.getServletContext() .getRealPath("/upload") + "/" + newFileName); upload(myFile, imageFile); return SUCCESS; } private static void upload(File src, File dst) { try { InputStream in = null; OutputStream out = null; try { in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE); out = new BufferedOutputStream(new FileOutputStream(dst), BUFFER_SIZE); byte[] buffer = new byte[BUFFER_SIZE]; while (in.read(buffer) > 0) { out.write(buffer); } } finally { if (null != in) { in.close(); } if (null != out) { out.close(); } } } catch (Exception e) { e.printStackTrace(); } } private static String getExtention(String fileName) { int pos = fileName.lastIndexOf("."); return fileName.substring(pos); } }

從Jquery 官方下載 jquery.uploadify 這個文件上傳插件。解壓放到WebRoot 下

新建一個Jsp(html)頁面

<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="jquery.uploadify/default.css" mce_href="jquery.uploadify/default.css" rel="stylesheet" type="text/css"/> <link href="jquery.uploadify/uploadify.css" mce_href="jquery.uploadify/uploadify.css" rel="stylesheet" type="text/css"/> <mce:script type="text/javascript" src="jquery.uploadify/jquery-1.3.2.min.js" mce_src="jquery.uploadify/jquery-1.3.2.min.js"></mce:script> <mce:script type="text/javascript" src="jquery.uploadify/swfobject.js" mce_src="jquery.uploadify/swfobject.js"></mce:script> <mce:script type="text/javascript" src="jquery.uploadify/jquery.uploadify.v2.1.0.min.js" mce_src="jquery.uploadify/jquery.uploadify.v2.1.0.min.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="fileQueue"></div> <input type="file" name="myFile" id="uploadTest" > <a href="javascript:$('#uploadTest').uploadifyUpload()" mce_href="javascript:$('#uploadTest').uploadifyUpload()">上傳</a> <a href="javascript:$('#uploadTest').uploadifyClearQueue()" mce_href="javascript:$('#uploadTest').uploadifyClearQueue()">取消上傳</a> </body> </html>

Struts.xml

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <constant name="struts.multipart.maxSize" value="10000000"></constant> <package name="default" namespace="/" extends="struts-default"> <action name="upload" class="com.fileUpload.Action.UploadAction"> <result name="success" type="redirect">/index.jsp</result> </action> </package> </struts>

OK ,大功告成！

罪愛

發佈了18 篇原創文章 · 獲贊 4 · 訪問量 2萬+

私信關注

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

Struts2 + jquey.uploadify 實現無刷新帶進度條上傳

Mapping 方式生成靜態頁

Luncene 之一：創建索引(Luncene + paoding)

設計模式之命令(command)模式

利用 Urlrewrite 簡單實現僞靜態

工程師們，不要想一輩子靠技術混飯喫！

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結