zyUpload+struct2完成文件上傳

時間 2019-11-12

標籤 zyupload+struct2 zyupload struct 完成文件上傳简体版

原文原文鏈接

前言：

　　最近在寫本身的博客網站，算是強化一下本身對s2sh框架的理解。期間遇到了不少問題，這些問題在寫以前都考慮過，感受也就是那樣吧。但正真遇到了，也挺讓人難受的。就利用zyUpload這個js插件實現文件的上傳，我來談一談。git

zyUpload下載：

　　https://github.com/hjzgg/zyUpload ，或者能夠在網上，隨便就能夠下載到，只不過提供的網址中的zyUpload是我改過的。github

zyUpload界面效果：

zyUpload使用須要注意的幾個地方：　

　　說明：zyUpload 配合Strus2實現圖片或文件的上傳ajax

　　（1）zyFile.js，lanrenzhijia.js，zyUpload.js設置 url : "fileUploadAction!execute", // 上傳文件的路徑
　　（2）文件的上傳經過 zyFile.js中的funUploadFile函數，修改formdata.append("upload", file) file對應的name屬性值，這裏是"upload"，保證和後臺的name屬性值同樣！上傳的代碼以下：數組

　　　　　// 上傳多個文件
        funUploadFiles : function(){
            var self = this;  // 在each中this指向沒個v  因此先將this保留
            // 遍歷全部文件  ，在調用單個文件上傳的方法
            $.each(this.uploadFile, function(k, v){
                self.funUploadFile(v);
            });
        },
        // 上傳單個個文件
        funUploadFile : function(file){
            var self = this;  // 在each中this指向沒個v  因此先將this保留
            
            var formdata = new FormData();
            formdata.append("upload", file);                     
            var xhr = new XMLHttpRequest();
            // 綁定上傳事件
            // 進度
            xhr.upload.addEventListener("progress",     function(e){
                // 回調到外部
                self.onProgress(file, e.loaded, e.total);
            }, false); 
            // 完成
            xhr.addEventListener("load", function(e){
                // 從文件中刪除上傳成功的文件  false是不執行onDelete回調方法
                self.funDeleteFile(file.index, false);
                // 回調到外部
                self.onSuccess(file, xhr.responseText);
                if(self.uploadFile.length==0){
                    // 回調所有完成方法
                    self.onComplete("所有完成");
                }
            }, false);  
            // 錯誤
            xhr.addEventListener("error", function(e){
                // 回調到外部
                self.onFailure(file, xhr.responseText);
            }, false);  
            xhr.open("POST", self.url, true);
            xhr.send(formdata);
        },

　　（3）缺陷就是隻能單個文件上傳！用的是FormData對象，利用ajax技術，每次上傳都要請求後臺。
　　（4）zyFile.js中的一些接口都是在zyUpload.js中實現！session

　　　　下面是zyFile.js中的一些接口app

　　　　 filterFile : function(files){ // 提供給外部的過濾文件格式等的接口，外部須要把過濾後的文件返回
        
        },
        onSelect : function(selectFile, files){      // 提供給外部獲取選中的文件，供外部實現預覽等功能  selectFile:當前選中的文件  allFiles:還沒上傳的所有文件
            
        },
        onDelete : function(file, files){            // 提供給外部獲取刪除的單個文件，供外部實現刪除效果  file:當前刪除的文件  files:刪除以後的文件
            
        },
        onProgress : function(file, loaded, total){  // 提供給外部獲取單個文件的上傳進度，供外部實現上傳進度效果
            
        },
        onSuccess : function(file, responseInfo){    // 提供給外部獲取單個文件上傳成功，供外部實現成功效果
            
        },
        onFailure : function(file, responseInfo){    // 提供給外部獲取單個文件上傳失敗，供外部實現失敗效果
        
        },
        onComplete : function(responseInfo){         // 提供給外部獲取所有文件上傳完成，供外部實現完成效果
            
        },

　　　　zyFile.js中filterFile給外部提供的函數接口在 zyUpload.js能夠找到，用來進行文件的過濾！對於filterFile這個藉口，實現以下（固然，你能夠根據本身的需求本身來實現，我這裏只是想上傳圖片文件而已）：框架

            this.funFilterEligibleFile = function(files){
                var arrFiles = [];  // 替換的文件數組
                for (var i = 0, file; file = files[i]; i++) {
                    if (file.size >= 51200000) {
                        alert('您這個"'+ file.name +'"文件大小過大');    
                    } else {
                        // 在這裏須要判斷當前全部文件中
                        var fileExt = file.name.substr(file.name.lastIndexOf(".")).toLowerCase();//得到文件後綴名
                        if(fileExt==".png" || fileExt==".gif" || fileExt==".jpg" || fileExt==".jpeg")
                            arrFiles.push(file);//若是文件是圖片格式，那麼就放入文件的數組    
                        else {
                            alert("文件僅限於 png, gif, jpeg, jpg格式 !");
                        }
                    }
                }
                return arrFiles;
            };

　　　　　　　filterFile: function(files) {
                 // 過濾合格的文件
                 return self.funFilterEligibleFile(files);
            },

struct2後臺處理:

1.structs.xml中配置文件上傳解析器

　<!-- struct2默認使用jakarta的Common-FileUpload的文件上傳解析器 -->
  <constant name="struts.multipart.parser" value="jakarta"/>

2.structs.xml中action的配置

　　<action name="fileUploadAction" class="fileUploadAction" method="struts-default">
        <param name="savePath">/fileUpload</param>
        <result name="errors" type="redirect">/errorsMessage/fileErrorsTip.jsp</result>
        <result name="operations" type="redirect">/operationsMessage/fileOperationsTip.jsp</result>
   </action>

3.dao層

public class PictureDao implements Serializable{
    private SessionFactory sessionFactory;

    public SessionFactory getSessionFactory() {
        return sessionFactory;
    }

    public void setSessionFactory(SessionFactory sessionFactory) {
        this.sessionFactory = sessionFactory;
    }
    
    private Session getSession(){
        return sessionFactory.getCurrentSession();
    }

　　public PictureGroup pictureJspGetOneGroup(int groupId){//獲得相冊的分組
        PictureGroup pictureGroup = null;
        Session session = null;
        Transaction tran = null;
        try{
            session = this.getSession();
            tran = session.beginTransaction();
            pictureGroup = (PictureGroup)session.createQuery("from PictureGroup where groupId="+groupId).list().get(0);
            tran.commit();
        } catch(Exception e) {
            System.out.println(e.toString());
            tran.rollback();
            return null;
        }
        return pictureGroup;
    }
    
    public String newMyPicture(MyPicture myPicture){//持久化圖片信息
        Session session = null;
        Transaction tran = null;
        try{
            session = this.getSession();
            tran = session.beginTransaction();
            session.persist(myPicture);
            tran.commit();
        } catch(Exception e){
            System.out.println(e.toString());
            tran.rollback();
            return e.toString();
        }
        return null;
    }
    
}

4.action部分

public class FileUploadAction extends ActionSupport{
    private PictureDao pictureDao;
    public PictureDao getPictureDao() {
        return pictureDao;
    }
    public void setPictureDao(PictureDao pictureDao) {
        this.pictureDao = pictureDao;
    }

    private List<File>    upload; // 上傳的文件
    private List<String> uploadFileName; // 文件名稱
    private List<String> uploadContentType; // 文件類型
    private String savePath;
    
    public List<File> getUpload() {
        return upload;
    }
    public void setUpload(List<File> upload) {
        this.upload = upload;
    }
    public List<String> getUploadFileName() {
        return uploadFileName;
    }
    public void setUploadFileName(List<String> uploadFileName) {
        this.uploadFileName = uploadFileName;
    }
    public List<String> getUploadContentType() {
        return uploadContentType;
    }
    public void setUploadContentType(List<String> uploadContentType) {
        this.uploadContentType = uploadContentType;
    }
    public String getSavePath() {
        return savePath;
    }
    public void setSavePath(String savePath) {
        this.savePath = savePath;
    }
    
    private String pictureName = null;
    private String picturePath = null;
    private String pictureGroupId = null;
    public String fileUploadSuccess(){//添加一張圖片
        try{
            MyPicture myPicture = new MyPicture();
            myPicture.setPictureName(pictureName);
            myPicture.setPicturePath(picturePath);
            myPicture.setPictureBuildTime(new Timestamp(System.currentTimeMillis()));
            PictureGroup pictureGroup = pictureDao.pictureJspGetOneGroup(Integer.parseInt(pictureGroupId));//爲了獲得持久化的相冊分組對象 if(pictureGroup == null) throw new NullPointerException("分組爲空!");
            myPicture.setGroup(pictureGroup);
            String msg = pictureDao.newMyPicture(myPicture);
            ActionContext.getContext().getSession().put("operations", "圖片" + pictureName + (msg==null ? "上傳成功!" : "上傳失敗:"+msg));
        } catch (Exception e){
            System.out.println(e.toString());
            ActionContext.getContext().getSession().put("errors", "圖片" + pictureName + "添加失敗: " + e.toString() + " 異常位置： FileUploadAction!fileUploadSuccess。");
            return "errors";
        }
        return "operations";
    }
    
    @Override
    public String  execute() throws Exception {
        try{
            // 取得須要上傳的文件數組
            List<File> files = getUpload();
            HttpServletRequest request = ServletActionContext.getRequest();
            //獲得 到 項目根目錄的URL
            String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
            if (files != null && files.size() > 0) {
                String realPath = ServletActionContext.getServletContext().getRealPath(savePath);
                //多個文件的上傳
//                for (int i = 0; i < files.size(); i++) {
//                    String fileName = System.currentTimeMillis()+getUploadContentType().get(i).replace("/", ".");
//                    picturesPath.add(url+savePath+"/"+fileName);
//                    FileOutputStream fos = new FileOutputStream(realPath + "\\" + fileName);
//                    FileInputStream fis = new FileInputStream(files.get(i));
//                    byte[] buffer = new byte[1024];
//                    int len = 0;
//                    while ((len = fis.read(buffer)) > 0) {
//                        fos.write(buffer, 0, len);
//                    }
//                    fis.close();
//                    fos.close();
//                }
                
                if((pictureGroupId=(String)ActionContext.getContext().getSession().get("pictureGroupId")) == null){//未選擇分組
                    ActionContext.getContext().getSession().put("operations", "圖片"+uploadFileName+"上傳失敗，分組未選擇! <a target='_parent' href='../pictureAction!pictureGroupJspGetAllGroups'>選擇分組</a>");
                    return "operations";
                }
                
                //處理單個文件的上傳
                String fileName = System.currentTimeMillis()+getUploadFileName().get(0)+getUploadContentType().get(0).replace("/", ".");
                FileOutputStream fos = new FileOutputStream(realPath + "\\" + fileName);
                FileInputStream fis = new FileInputStream(files.get(0));
                byte[] buffer = new byte[1024];
                int len = 0;
                while ((len = fis.read(buffer)) > 0) {
                    fos.write(buffer, 0, len);
                }
                fis.close();
                fos.close();
                picturePath = url+savePath+"/"+fileName;
                pictureName = getUploadFileName().get(0);
                return fileUploadSuccess();
            } else {
                ActionContext.getContext().getSession().put("errors", "獲得文件數目爲0! 異常位置：FileUploadAction!execute。");
            }
        } catch (Exception e){
            System.out.println(e.toString());
            ActionContext.getContext().getSession().put("errors",  "圖片" + getUploadFileName().get(0) + "上傳失敗: " + e.toString()+"異常位置：FileUploadAction!execute。");
            return "errors";
        }
        return "errors";
    }
}

5.說一下Action中的一些信息：

　　String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath(); 獲得請求項目的地址，如http://localhost:8080/myBlog;jsp

　　String fileName = System.currentTimeMillis()+getUploadFileName().get(0)+ide

　　　　　　　　　 getUploadContentType().get(0).replace("/", "."); 生成惟一文件名稱。函數

　　String realPath = ServletActionContext.getServletContext().getRealPath(savePath);獲得圖片的存儲地址

　　picturePath = url+savePath+"/"+fileName;獲得圖片的src地址