nodejs + multer + angularjs上傳，無需重定向

Question

我使用Nodejs + Multer + angularjs上傳服務器上的文件。

我有一個簡單的HTML文件：

<form action="/multer" method="post" enctype="multipart/form-data"> 
<input type="file" id="photo" name="photo"/> 
<button id="Button1">Upload</button> 
</form> 

部分的NodeJS：

var multer = require('multer'); 

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
     cb(null, './uploads/') 
    }, 
    filename: function (req, file, cb) { 
     cb(null, file.originalname) 
    } 
}) 

app.post('/multer', upload.single('photo'), function (req, res) { 
    res.end("File uploaded."); 
}); 

這工作完全，文件上傳成功。

但是這個重定向到上傳文件後（因爲表單元素）「/ multer」。
我如何留在同一頁面？ ..possibly使用angularjs
所以我嘗試這樣：

製備HTML文件角：

<section data-ng-controller="myCtrl"> 
<input type="file" id="photo" name="photo"/> 
<button id="Button1" ng-click="f()">Upload</button> 
</section> 

和Angularjs控制器：

angular.module('users').controller('myCtrl',[$scope,function($scope){ 
    $scope.f=function(){ 
     var photo = document.getElementById('photo'); 
     var file = photo.files[0]; 
     if (file) { 

      //code to make a post request with a file object for uploading????? 

      //something like.. 
      //$http.post('/multer', file).success(function(response) { 
      //console.log("success"); 
      //}); 
     } 
    } 
}]); 

有人可以幫我使用角度控制器進行上傳的文件對象上傳文件的代碼？

感謝

Answer 1

Angularjs指令：

angular.module('users').directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function(){ 
      scope.$apply(function(){ 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
}; 
}]); 

角HTML文件：

<input type="file" file-model="myFile"/><br><br> 
<button ng-click="uploadFile()">Upload</button> 

Angularjs控制器：

$scope.uploadFile = function(){ 

     var file = $scope.myFile; 
     var uploadUrl = "/multer"; 
     var fd = new FormData(); 
     fd.append('file', file); 

     $http.post(uploadUrl,fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
      console.log("success!!"); 
     }) 
     .error(function(){ 
      console.log("error!!"); 
     }); 
    }; 

服務器的NodeJS路由文件：

var multer = require('multer'); 
var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
     cb(null, './uploads/') 
    }, 
    filename: function (req, file, cb) { 
     cb(null, file.originalname+ '-' + Date.now()+'.jpg') 
    } 
}); 
var upload = multer({ storage: storage }); 

app.post('/multer', upload.single('file')); 

享受！