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的文件上傳角版本 - 在同一頁面

回答

相關問題