0

ng-flow のダウンロードで提供される単純な画像アップロードの例に基づいて、単純なドラッグ アンド ドロップ効果を使用しています。.post()ドラッグ アンド ドロップは正常に機能していますが、フォーム送信アクションまたは Angular関数を使用して画像をアップロードしたいので、デフォルトのアップロード アクションを停止したいと思います。

<html ng-app="app" ng-controller="imageController" flow-init
      flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
      flow-files-submitted="$flow.upload()">
<head>
  <title>Image</title>
<!--   <script src="../../bower_components/angular/angular.js"></script> -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="../../js/ng-flow-standalone.js"></script>
  <script src="app.js"></script>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
        rel="stylesheet"/>
  <style>
    .thumbnail {
      max-width: 200px; max-height: 150px; line-height: 20px; margin-bottom: 5px;
    }
  </style>
</head>
<body flow-prevent-drop>

<div class="container" >
  <h1>flow image example</h1>
  <hr class="soften"/>

  <div>
    <div class="thumbnail" ng-hide="$flow.files.length" 
         flow-drop flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
      <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
    </div>
    <div class="thumbnail" ng-show="$flow.files.length">
      <img flow-img="$flow.files[0]" />
    </div>
    <div>
      <a href="#" class="btn" ng-hide="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Select image</a>
      <a href="#" class="btn" ng-show="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Change</a>
      <a href="#" class="btn btn-danger" ng-show="$flow.files.length"
         ng-click="$flow.cancel()">
        Remove
      </a>
    </div>
    <p>
      Only PNG,GIF,JPG files allowed.
    </p>
  </div>
</div>
</body>
</html>

event.preventDefault(); を使用しようとしました。「fileAdded」および「filesSubmitted」イベント ハンドラーで、これはアップロード開始イベントを停止していません。フォーム送信処理中にアップロード処理を実行したい。

「fileAdded」イベントで「return false」を使用すると、画像がまったく挿入されません。

ただし、「filesSubmitted」イベント ハンドラーにエラーを挿入すると、スクリプトは失敗し、アップロードはトリガーされません。しかし、これはこの効果を達成するためのクリーンな方法ではありません。

このコードも使用しましたが、画像がページに追加されません。

app.controller('imageController', 
    ['$scope', 
    function ($scope) {
        $scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
              console.log('$scope.$on', event, $flow);
              event.preventDefault();//prevent file from uploading
              console.log("event.preventDefault() executed.")
            });
}])

詳細については、以下のスナップショットを参照してください。

この問題を解決するためにあなたの助けに感謝します.

ここに画像の説明を入力 ここに画像の説明を入力

4

1 に答える 1