65

AngularJS用の優れた統合（ディレクティブ）を備えた優れたファイルアップローダーはありますか？

スタイリングが簡単で、HTML5のドラッグアンドドロップなどをサポートするものを探しています。

おそらく、既存のアップローダーを使用してAngularJSに統合するのは簡単だと言う人がいるかもしれません。つまり、簡単であれば、誰かがすでにそれを実行しているはずです。

4

5 に答える 5

47

私は実際に自分のアップローダーを一度ロールしました...しかし、すでに作成されたJQueryのものが好きではなかったからです。残念ながら、これは独自仕様であり、インターネットに投稿することはできません...しかし...AngularのほぼすべてのJQueryプラグインの使用方法を紹介できます。

誰かがおそらく、既存のアップローダーを使用してそれをAngularJSに統合するのは簡単だと言うでしょう-私が言うには、それが簡単なら、誰かがすでにそれをしているはずです。

divを選択して呼び出すことで機能するjQueryプラグインがあるとしましょうpluginUploadCall()...

app.directive('myJqueryPluginUploader', function() {
   return {
      restrict: 'A',
      link: function(scope, elem, attr, ctrl) {
          // elem is a jQuery lite object
          // or a jQuery object if jQuery is present.
          // so call whatever plugins you have.
          elem.pluginUploadCall();
      }
   };
});

そして、これがその使用方法です。

<div my-jquery-plugin-uploader></div>

Angularは実際にはjQueryと非常によく統合されているため、jQueryで機能するプラグインはAngularで非常に簡単に機能するはずです。唯一の注意点は、依存性注入を存続させて、Angularアプリをテスト可能に保ちたい場合に発生します。JQueryはDIがあまり得意ではないため、いくつかのフープを飛び越えなければならない場合があります。

あなたがあなた自身を転がしたいのなら、私はあなたに私がこのようなことをしたと言うことができます：

app.directive('customUploader', function(){
    return {
       restrict: 'E',
       scope: {},
       template: '<div class="custom-uploader-container">Drop Files Here<input type="file" class="custom-uploader-input"/><button ng-click="upload()" ng-disabled="notReady">Upload</button></div>',
       controller: function($scope, $customUploaderService) {
          $scope.notReady = true;
          $scope.upload = function() {
             //scope.files is set in the linking function below.
             $customUploaderService.beginUpload($scope.files);
          };
          $customUploaderService.onUploadProgress = function(progress) {
             //do something here.
          };
          $customUploaderService.onComplete = function(result) {
             // do something here.
          };
       },
       link: function(scope, elem, attr, ctrl) {
          fileInput = elem.find('input[type="file"]');
          fileInput.bind('change', function(e) {               
               scope.notReady = e.target.files.length > 0;
               scope.files = [];
               for(var i = 0; i < e.target.files.length; i++) {
                   //set files in the scope
                   var file = e.target.files[i];
                   scope.files.push({ name: file.name, type: file.type, size: file.size });
               }
          });
       }
});

ファイルを投稿し、サーバーで進行状況を確認するために使用$customUploaderServiceするカスタムサービスはどこにありますか。Module.factory()$http

あいまいなことは承知しており、申し訳ありませんが、ご提供できるのはそれだけですが、お役に立てば幸いです。

編集：ドラッグアンドドロップファイルのアップロードはCSSのちょっとしたトリックです、ところで... ChromeとFFの場合、あなたがすることはそれを含むdivに入れることです...そして次のようなことをします：

<div class="uploadContainer">Drop Files Here<input type="file"/></div>

div.uploadContainer {
   position: relative;
   width: 600px;
   height: 100px;
}

div.uploadContainer input[type=file] {
   visibility: hidden;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

...これで、そのdivにドロップしたものはすべて、ファイルのアップロード時に実際にドロップされ、divを好きなように見せることができます。

于 2012-10-21T23:52:34.643 に答える
25

AngularJS.ngUploadを試してみることができます。

これは、ファイルのアップロードに非表示のiFrameを使用するHTML5フリーのソリューションです。HTML5に依存しないため、ブラウザ全体で機能します。

サンプルコード：

<form action='/server/upload/handler' ng-upload="callbackFunction">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
<div>{{uploadReport}}</div>

クリックイベントをサポートする任意のhtml要素を使用して、ngUploadディレクティブでマークされたフォームを送信できます。ただし、そのような要素は、上記のinput [type=submit]の場合のようにupload- submitcssクラスでマークする必要があります。

以下の例では、スタイル付きdivを使用してフォームを送信しています。

<form action='/server/upload/handler' ng-upload="callbackFunction">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <div style="cursor: pointer; padding: 5px" class="upload-submit">Submit</div>
</form>
<div>{{uploadReport}}</div>

/ server / upload / handlerに有効なURLを指定して、{{uploadReport}}を使用して<img>タグのsrcを次のように設定できます。

<img ng-src={{uploadReport}} />

アップロードされた画像がすぐに表示されるのを見てください！

上記の例のngControllerは次のとおりです。

var UploadCtrl = function ($scope) {
     $scope.callbackFunction = function(contentOfInvisibleFrame) {
         $scope.uploadReport = contentOfInvisibleFrame;
     }
}

ngUploadディレクティブは、AngularJSアプリケーションモジュールに登録できます。

var mainApp = angular.module('MainApp', ["ngUpload", ...]);

次のようにドキュメントに追加されます。

<html ng-app="MainApp">

</html>

AngularJS.ngUploadは、ngControllerのコンテキストで機能します。そのため、1つのngControllerにできるだけ多くのアップローダーを含めることができます。例えば：

<form action='/server/upload/handler' ng-upload="callbackFunction1">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport1}}

<form action='/server/upload/handler' ng-upload="callbackFunction2">
   <!-- other form inputs goes here -->
   <input type="file" name="anotherEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport2}}

提供されるもの：

var UploadCtrl = function ($scope) {
     $scope.callbackFunction1 = function(contentOfInvisibleFrame) {
         $scope.uploadReport1 = contentOfInvisibleFrame;
     }

     $scope.callbackFunction2 = function(contentOfInvisibleFrame) {
         $scope.uploadReport2 = contentOfInvisibleFrame;
     }
}

このディレクティブのNodeJSベースのアップロードハンドラーデモは、http：//ng-upload.eu01.aws.af.cmにあります。

ASP.Net MVCおよびNodeJSのサンプルコードは、プロジェクトのWebサイト（github.com/twilson63/ngUpload/tree/master/examples）にあります。

お役に立てれば。

于 2013-03-08T09:38:29.063 に答える
12

HTML5FormDataをサポートしていないブラウザー用のpolyfillを使用したシンプル/ライト角度ディレクティブをここにまとめました。

https://github.com/danialfarid/ng-file-upload

他のモデルオブジェクトをファイルと一緒にサーバーに送信できます。デモページは次のとおりです。

http://angular-file-upload.appspot.com/

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="text" ng-model="myModelObj">
  <input type="file" ngf-select ng-model="files" >
</div>

コントローラ：

Upload.upload({
    url: 'my/upload/url',
    data: {myObj: $scope.myModelObj},
    file: $scope.files
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  });
于 2013-07-24T15:46:23.710 に答える
7

複数のファイルを処理したい場合は、これを試してください

jQueryファイルのアップロード元の作成者からのAngularjsラップ（blueimp）

これまでで最も強力なアップローダーだと思います。

于 2013-07-13T22:51:20.583 に答える
5

最近、ネイティブの複数ファイルのアップロードをサポートするディレクティブを作成しました。

使用例：

<lvl-file-upload
    auto-upload='false'
    choose-file-button-text='Choose files'
    upload-file-button-text='Upload files'
    upload-url='http://localhost:3000/files'
    max-files='10'
    max-file-size-mb='5'
    get-additional-data='getData(files)'
    on-done='done(files, data)'
    on-progress='progress(percentDone)'
    on-error='error(files, type, msg)'/>

コードはgithubにあり、ドキュメントは私のブログにあります。

于 2013-09-12T13:30:49.803 に答える