2

干杯，

这是一个很好的例子，如何将 jquery-file-upload 插件与 angularjs 一起使用 如何使用 jquery 文件上传 angular 版本？

但！如果在同一页面上我们需要几个小部件怎么办？

<form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <!-- ... -->
</form>
<form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <!-- ... -->
</form>

这个例子效果很好，除了：

  1. 回调。使用 $scope.$on() 不太正确。如何为每个小部件指定特定的回调？

  2. 拖放。似乎拖放区域也在两个小部件之间共享，因此当我将文件放在页面上的任何位置时，两个事件都会触发。再说一遍，如何为每个指定放置区域？

我的想法是 jquery-file-upload 本身就可以满足所有这些要求，以及糟糕的jQuery File Upload AngularJS Plugin

4

2 回答 2

3

不确定如何解决此问题，但angular-file-upload 指令可能会为您省去麻烦。它轻量级且易于使用，并且支持带有 FileAPI flash shim 的非 HTML5 浏览器。它还支持拖放和上传进度。

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)" multiple>
  <div class="drop-box" ng-file-drop="onFileSelect($files);" ng-show="ddSupported">drop files here</div>
  <div ng-file-drop-available="dropSupported=true" ng-show="!ddSupported">HTML5 Drop File is not suported></div>

JS：

//inject angular file upload directive.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $upload.upload({
        url: 'my/upload/url',
        file: $file,
        progress: function(e){}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];
于 2013-10-28T22:16:47.640 回答
1

我遇到了类似的问题，并且无法找到任何示例如何一次使用更多输入字段，所以我在尝试toyed了很长时间之后，终于找到了一个非常简单的解决方案：

  • 您只需要为每个输入字段和（为）每个需要指定其放置区域的输入字段提供单独的控制器......例如像这样：

    <form ng-controller="MyVideoUploadController"><div id="videoFilesInputZone" ></div></form>

    <form ng-controller="MyAudioUploadController"><div id="audioFilesInputZone" ></div></form>

    .controller('MyVideoUploadController', [
'$scope', '$http', '$filter', '$window',
function ($scope) {
    $scope.options = {
        dropZone: $("#videoFilesInputZone")
    };
    $scope.loadingFiles = true;
}]).controller('MyAudioUploadController', [
'$scope', '$http', '$filter', '$window',
function ($scope) {
    $scope.options = {
        dropZone: $("#audioFilesInputZone")
    };
    $scope.loadingFiles = true;
}

    ])

这就是你所需要的。唯一的缺点是您不能将文件放在任何地方，而必须将它们完全放在所选元素上......

于 2014-04-02T12:39:32.943 回答