天天看點

angularjs上傳檔案+jfinal接收上傳檔案

準備js插件:angular-file-upload.min.js

jsp部分:

<input  type="file" nv-file-select="" uploader="uploader"/>

<input  type="button" value="上傳更新檔"  ng-click="uploadFile()"/>

angularjs部分:

var myApp = angular.module("myApp", ["angularFileUpload"]);

myApp.controller('patchList', [ '$scope', 'FileUploader',

  function($scope, FileUploader) {

   var uploader = $scope.uploader = new FileUploader({

    // 通路java方法的http請求

    url : ctx + '/patch/uploadPatch'

   });

//上傳完成之後的回調方法,還有很多類似方法,此處不一一列舉

 uploader.onCompleteItem = function(fileItem, response, status, headers) {

    //上傳成功之後你要調用的angularjs方法    

   $scope.getPatchList();

   };

   $scope.uploadFile = function() {

    console.log("上傳檔案啦....");

    uploader.uploadAll();

   }

  } ]);

java部分:

 public void uploadPatch(){

  System.out.println("接收到上傳檔案啦.....");

  UploadFile uploadFile=this.getFile();

  File file=uploadFile.getFile();

  String fileName=uploadFile.getOriginalFileName();

  //PatchConstant.PATCH_UPLOAD_PATH自定義檔案存儲的路徑

  File newFile=new File(PatchConstant.PATCH_UPLOAD_PATH+fileName);

  try {

   newFile.createNewFile();

  } catch (IOException e) {

   e.printStackTrace();

  }

 //将上傳檔案寫入到本地檔案

  ToolFile.fileChannelCopy(file,newFile);   

 }

public static void fileChannelCopy(File s, File t) {

        FileInputStream fi = null;

        FileOutputStream fo = null;

        FileChannel in = null;

        FileChannel out = null;

        try {

            fi = new FileInputStream(s);

            fo = new FileOutputStream(t);

            in = fi.getChannel();// 得到對應的檔案通道

           out = fo.getChannel();// 得到對應的檔案通道

            in.transferTo(0, in.size(), out);// 連接配接兩個通道,并且從in通道讀取,然後寫入out通道

        } catch (IOException e) {

            e.printStackTrace();

        } finally {

            try {

                fi.close();

                in.close();

                fo.close();

                out.close();

            } catch (IOException e) {

                e.printStackTrace();

            }

        }

    }

jfinal實作接收上傳檔案參考資源:http://www.cnblogs.com/acehalo/p/3915720.html

angular-file-upload官方網站:https://github.com/nervgh/angular-file-upload

(官方執行個體位于angular-file-upload-master/angular-file-upload-master/examples中)

繼續閱讀