Question

干杯，

这是一个如何使用带有angularjs的jquery-file-upload插件的好例子 how to use jquery file upload angular version?

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

<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>

此示例效果很好，除了：

回调。使用$ scope。$ on（）是不对的。如何为每个小部件指定特定的回调？
将正掉落。看起来像拖放区域也在两个小部件之间共享，所以当我将文件放在页面上的任何位置时都会触发两个事件。那么，如何为每一个指定下降区域？

我的意思是jquery-file-upload可以涵盖所有这些要求本身以及所有关于穷人的jQuery File Upload AngularJS Plugin

Answer 1

不确定如何解决此问题，但angular-file-upload directive可能会为您省去麻烦。它重量轻，使用简单，支持非HTML5浏览器和FileAPI闪存垫片。它还支持拖放和上传进度。

<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);
      }); 
    }
  }
}];

Answer 2

我遇到了类似的问题，并且无法找到任何问题，如何一次使用更多的输入字段，所以我toyed和一些非常 loooong 的时间一起试验它，我最终找到了一个非常简单的解决方案：

你只需要为每个输入字段和（for）每个输入字段指定单独的控制器，例如像这样：

＆LT;表格ng-controller =“MyVideoUploadController”＆gt;＆lt; div id =“videoFilesInputZone”＆gt;＆lt; / div＆gt;＆lt; / form＆gt;

＆LT;形成ng-controller =“MyAudioUploadController”＆gt;＆lt; div id =“audioFilesInputZone”＆gt;＆lt; / div＆gt;＆lt; / form＆gt;

.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;
}

]）

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

Jquery文件上传角度版本 - 在同一页面上多个文件上传

2 个答案: