如何在拖放事件后停止对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 Ó检索所选择的图像的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()功能发送到服务器而不是使用传统表单提交按钮。

我希望你会发现上面的有用。

Tarek

来源

2016-09-01 15:43:15 tarekahf

如何在拖放事件后停止对ng-flow插件的上传操作

回答

相关问题