如何使用angularjs將文件上傳到blobstore？

我正在爲我的項目創建一個音頻文件上傳系統。在這種情況下，我使用的是angularjs應用程序，我也使用html。我使用谷歌應用程序引擎編寫了我的應用程序的後端。在這種情況下，我發現的問題是我跟着谷歌blobstore api，並使用jsp頁面上傳文件。但我想通過和html頁面來完成它。問題是在jsp中有一個java代碼，它在blobstore api中調用createUploadUrl方法。但在html頁面中，我無法做到。我試圖用以下方式使用angularjs來完成它。如何使用angularjs將文件上傳到blobstore？

<div class="container"> 
 

 
\t <h1>Audio Upload</h1> 
 

 
\t <form method="post" enctype="multipart/form-data"> 
 

 
\t \t <input type="text" name="foo" ng-model="audio.foo"/> 
 
\t \t <input type="file" name="myFile" ng-model="audio.myFile"/> 
 
\t \t <input type="submit" value="Submit" ng-click="upload(audio)"/> 
 

 
\t </form> 
 

 
</div>

這裏是html頁面的代碼。

而以下是html頁面的控制器。

function AudioUpload($http,$filter, $timeout, $scope, $location, $rootScope) { 
 

 
\t console.log("========================="); 
 
\t console.log("Audio Upload Controller..."); 
 
\t $scope.upload = function(audio) { 
 
\t \t $('.line-loader').show(); 
 
\t \t $http({ 
 
\t \t \t url : '/upload', 
 
\t \t \t method : "POST", 
 
\t \t \t //data : $.param(audio), 
 
\t \t \t headers : { 
 
\t \t \t \t 'Content-Type' : 'audio/mp3; charset=UTF-8' 
 
\t \t \t } 
 
\t \t }).success(function(data) { 
 
\t \t \t console.log(audio.myFile+"Audio Successfully Uploaded...") 
 

 
\t \t }) 
 

 
\t } 
 

 
}

這裏是正在使用得到這個任務完成

Servlet的發球Servlet的

package xxx.xxxx.fileupload; 
 

 
import java.io.IOException; 
 

 
import javax.servlet.http.HttpServlet; 
 
import javax.servlet.http.HttpServletRequest; 
 
import javax.servlet.http.HttpServletResponse; 
 

 
import com.google.appengine.api.blobstore.BlobKey; 
 
import com.google.appengine.api.blobstore.BlobstoreService; 
 
import com.google.appengine.api.blobstore.BlobstoreServiceFactory; 
 

 
public class Serve extends HttpServlet { 
 
    private BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService(); 
 

 
    @Override 
 
    public void doGet(HttpServletRequest req, HttpServletResponse res) 
 
     throws IOException { 
 
      BlobKey blobKey = new BlobKey(req.getParameter("blob-key")); 
 
      blobstoreService.serve(blobKey, res); 
 
     } 
 
}

上傳的Servlet

package xxx.xxxxx.fileupload; 
 

 
import java.io.IOException; 
 
import java.util.List; 
 
import java.util.Map; 
 

 
import javax.servlet.ServletException; 
 
import javax.servlet.http.HttpServlet; 
 
import javax.servlet.http.HttpServletRequest; 
 
import javax.servlet.http.HttpServletResponse; 
 

 
import com.google.appengine.api.blobstore.BlobKey; 
 
import com.google.appengine.api.blobstore.BlobstoreService; 
 
import com.google.appengine.api.blobstore.BlobstoreServiceFactory; 
 

 
public class Upload extends HttpServlet { 
 
\t private BlobstoreService blobstoreService = BlobstoreServiceFactory 
 
\t \t \t .getBlobstoreService(); 
 

 
\t @Override 
 
\t public void doPost(HttpServletRequest req, HttpServletResponse res) 
 
\t \t \t throws ServletException, IOException { 
 

 
\t \t 
 

 
\t \t Map<String, List<BlobKey>> blobs = blobstoreService.getUploads(req); 
 
\t \t List<BlobKey> blobKeys = blobs.get("myFile"); 
 

 
\t \t if (blobKeys == null || blobKeys.isEmpty()) { 
 
\t \t \t res.sendRedirect("/"); 
 
\t \t } else { 
 
\t \t \t res.sendRedirect("/serve?blob-key=" 
 
\t \t \t \t \t + blobKeys.get(0).getKeyString()); 
 
\t \t } 
 
\t } 
 
}

我需要使用HTML頁面上傳的文件，這是在index.jsp頁面與這些servlet正常工作的代碼。

的index.jsp

<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %> 
 
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %> 
 

 
<% 
 
    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService(); 
 
%> 
 

 

 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="audio/mp3; charset=ISO-8859-1"> 
 
     <title>Upload Test</title> 
 
    </head> 
 
    <body> 
 
     <form action="<%= blobstoreService.createUploadUrl("/upload1") %>" method="post" enctype="multipart/form-data"> 
 
      <input type="text" name="foo"> 
 
      <input type="file" name="myFile"> 
 
      <input type="submit" value="Submit"> 
 
     </form> 
 
    </body> 
 
</html>

任何人可以幫我用angularjs和HTML，而不使用JSP來完成我的代碼。謝謝。

來源

2015-04-02 Vibhatha Abeykoon

Angular還不支持文件輸入，所以你需要一個指令從輸入中獲取文件。該文件可以分配給控制器，然後你可以從那裏用$ http進行上傳。

(function(){ 
 
    angular.module('app',[]); 
 

 
    angular.module('app') 
 
    .controller('FileCtrl', FileCtrl) 
 
    .directive('fileDirective', fileDirective); 
 
    
 
    function FileCtrl(){ 
 
    var vm = this; 
 
    vm.myFile; 
 
    vm.upload = function(){ 
 
     // upload stuff goes here 
 
    } 
 
    
 
    } 
 
    
 
    fileDirective.$inject = ['$log']; 
 
    function fileDirective($log){ 
 
    var directive = { 
 
     restrict: 'A', 
 
     link: link, 
 
     scope: { 
 
     fileDirective: '=fileDirective', 
 
     file: '=name' 
 
    } 
 
    } 
 
    return directive; 
 
    
 
    function link(scope, element, attrs, controller){ 
 
     $log.debug(scope); 
 
     element.bind('change', function(){ 
 
     var fileSelected = element[0].files[0]; 
 
     $log.debug(fileSelected); 
 
     scope.$apply(function() { 
 
      scope.file = fileSelected; 
 
      $log.debug(scope.file); 
 
     }); 
 
     }); 
 
    } 
 
    } 
 
})()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" class="container" ng-controller="FileCtrl as audio"> 
 

 
\t <h1>Audio Upload</h1> 
 

 
\t <form method="post" enctype="multipart/form-data"> 
 
\t \t <input type="text" name="foo" ng-model="audio.foo"/> 
 
\t \t <input type="file" name="audio.myFile" file-Directive="audio.myFile"/> 
 
\t \t <input type="submit" value="Submit" ng-click="audio.upload(audio)"/> 
 

 
\t </form> 
 
    <p>Your file name is: {{audio.myFile.name}}</p> 
 

 
</div>

來源

2015-04-02 06:18:37

感謝很多的代碼，我是新來的角，我真的很感謝你的幫助。我不能把一個積極的反饋意見系統不會讓我因爲我是新的。並且非常感謝。 :) :) :) – 2015-04-06 05:25:35

我瞭解有關反饋意見 - 我也是新人，仍在努力弄清楚網站的工作原理。很高興我能幫上忙！ – 2015-04-06 14:59:40

如何使用angularjs將文件上傳到blobstore？

回答

相關問題