ng-flowプラグインのアップロードアクションをドラッグアンドドロップイベントの後に停止する方法

ng-flowのダウンロードで提供される単純なイメージアップロードの例に基づいて、単純なドラッグアンドドロップエフェクトを使用しています。ドラッグアンドドロップが正常に動作しているが、私は、フォームがアクションを提出使っまたは角.post()機能使用して画像をアップロードしたいので、私はデフォルトのアップロードアクションを停止したい：ng-flowプラグインのアップロードアクションをドラッグアンドドロップイベントの後に停止する方法

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

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

この問題を解決するには、お手数をお掛け致します。

出典

2016-08-19 tarekahf

私たちは角度ポスト（中に画像データを送信することができるようにアップロードアクションをトリガー停止するために必要なものを考え出し）の代わりに、フォームのアクションを提出します。

のいずれかから構成プロパティtargetを削除：

.config(['flowFactoryProvider', function (flowFactoryProvider) { 
    flowFactoryProvider.defaults = { 
     target: 'upload.php', 
     permanentErrors: [404, 500, 501], 
     maxChunkRetries: 1, 
     chunkRetryInterval: 5000, 
     simultaneousUploads: 4, 
     singleFile: true, 
};

またはイベントのいずれかから.pause()メソッドを呼び出す：

$scope.$on('flow::fileAdded', function (event, $flow, flowFile) { 
    console.log('flow::fileAdded - appraiser signature', event, $flow, flowFile); 
    ... 
    $scope.processFile(flowFile); 
    flowFile.pause(); 
    ... 
});

または.config()関数内このイベントを形成する：

flowFactoryProvider.on('fileAdded', function(file, event){ 
     console.log('fileAdded', file, event); 
     file.pause(); 
     event.preventDefault(); 
     console.log('file upload was paused.'); 
     return true; 
    });

を

そして、順序t O選択された画像のBase64文字列を取得し、あなたはコントローラ内部の次の関数を定義する必要があります上記で

$scope.processFile = function(flowFile){ 
     console.log('$scope.processFile', flowFile); 
     var fileReader = new FileReader(); 
     fileReader.onload = function (event) { 
       console.log('fileReader.onload - event=', event); 
       var uri = event.target.result; 
       $scope.imageString = uri; 
       $scope.imageStringB64 = uri.replace(/^data:image\/(png|jpg);base64,/, ''); 
     }; 
     fileReader.readAsDataURL(flowFile.file); 
    };

を、どのあなたができスコープ変数imageStringB64画像のBase64の値を取得しています従来のフォーム送信ボタンを使用する代わりに$http.post()関数を使用してサーバーに送信します。

上記の情報が役立つことを願っております。

タレット

出典

2016-09-01 15:43:15 tarekahf

ng-flowプラグインのアップロードアクションをドラッグアンドドロップイベントの後に停止する方法

答えて

関連する問題