Angular Js文件上傳

Question

我是棱角分明的新手。 我想用這個上傳文件。 我使用以下鏈接

http://jsfiddle.net/jasonals/WEvwz/27/ ？ upload.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<div ng-controller='TestCtrl'>
  <div>
      <input id="fileupload" type="file" name="files[]" data-url="/" multiple>
      <ul>
          <li ng-repeat="file in fileList">
              {{file.name}}
          </li>
      </ul>
  </div>

  <button ng-click='addButtonClicked()'>Add File</button>
</div>

controlller file.
$(document).ready(function(){
    $('#fileupload').fileupload({
        dataType: 'json'});
});

TestCtrl = function($scope){
    $scope.fileList = [];
    $('#fileupload').bind('fileuploadadd', function(e, data){
        // Add the files to the list
        numFiles = $scope.fileList.length
        for (var i=0; i < data.files.length; ++i) {
            var file = data.files[i];
        // .$apply to update angular when something else makes changes
        $scope.$apply(
            $scope.fileList.push({name: file.name})
            );
        }
        // Begin upload immediately
        data.submit();
    });
    $scope.addButtonClicked = function(){
        var numFiles = $scope.fileList.length;
        $scope.fileList.push({name: ('fileName' + numFiles)});
    }
}

但我無法使用此發布網址。

Answer 1

我無法直接回答您的問題，除了說：確保您在JSFiddle上的示例中輸入data-url 。

作為替代方案，我建議使用我成功使用的angular-file-upload 。 它使用角度指令來完成上傳。 這種模式使用了更多的代碼，但是將應用程序中的問題分開，這樣Controller就可以將事物粘合在一起，並且您的服務實際上與外部世界進行對話。

這將使您的應用程序更容易測試：

<div ng-controller="FileUploadController">
  <h3>Upload a file</h3>
  <input type="file" ng-file-select="uploadFile($files)" />
</div>

和javascript：

// define the app, include the file upload dependency
var app = angular.module('MyApp', ['ng', 'angularFileUpload']);

// controller to handle the file upload event
app.controller('FileUploadController', 
  function ($scope, $rootScope, FileUploadService) {
    var service = FileUploadService;
    /** 
     *  Handler to upload a new file to the server.
     */
    $scope.uploadFile = function ($files) {
      var $file = $files[0];
      service.uploadFile($file, function (error) {
        if (error) {
          alert('There was a problem uploading the file.');
        }
        // handle successfully-uploaded file
      })
    }
  });

// services should interact with the outside world
app.factory('FileUploadService', function ($http) {
  var api = {
    uploadFile: function (file, callback) {
      $http.uploadFile({
        url: '/some/remote/end/point/',
        file: file
      }).progress(function(event) {
        console.log('percent: ' + parseInt(100.0 * event.loaded / event.total));
      }).error(function (data, status, headers, config) {
        console.error('Error uploading file')
        callback(status);
      }).then(function(data, status, headers, config) {
        callback(null);
      });
    }
  }
  return api;
});

Answer 2

試試這個......

$(document).ready(function(){
    $('#fileupload').fileupload({
        dataType: 'json'});
});

TestCtrl = function($scope){
    $scope.fileList = [];
    $('#fileupload').bind('fileuploadadd', function(e, data){
            $scope.$apply(
            $scope.fileList.push({name: file.name})
            );   
        data.submit();
    });

}