jQuery的文件上传角版本 - 在同一页面

这里是一个很好的例子，如何使用jQuery的文件上传插件与angularjs 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（）不太正确。如何为每个小部件指定特定的回调？
Drag-n-Drop。似乎拖放区域也是在两个小部件之间共享的，所以当我在页面上的任何地方放置文件时，这两个事件都会触发。那么，如何为每一个指定拖放区域？

我虽然是jQuery的文件上传可以覆盖所有这些要求本身和它的所有关于穷人jQuery File Upload AngularJS Plugin

来源

2013-10-07 yark.smolk

不知道如何解决这个问题，但angular-file-upload directive可能会节省你的麻烦。它重量轻，使用简单，并且支持带有FileAPI闪存填充的非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-28 22:16:47 danial

我有simmilar的问题，没能找到任何的exaple如何同时使用多个输入字段，所以我toyed与后颇有些过长...时间试验有了它，我终于找到了一个非常简单的解决方案：

你只需要单独的控制器为每个输入字段在（对）每个那些你需要指定它降落区...例如像这样的：

<形式NG控制器= “MyVideoUploadController”> < DIV ID = “videoFilesInputZone”> </DIV> </FORM>

<形式NG-控制器= “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-02 12:39:32

jQuery的文件上传角版本 - 在同一页面

回答

相关问题