準備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中)