拖放事件后如何停止ng-flow插件的上传操作
我使用简单的拖放效果，基于下载的ng-flow提供的简单图像上传示例。拖放工作正常，但我想停止默认的上传操作，因为我想使用表单提交操作或使用Angular .post()函数来上传图像：
<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>
我尝试在"fileAdded“和"filesSubmitted”事件处理程序中使用event.preventDefault()；，但这并没有停止上载开始事件。我想在表单提交过程中执行上传过程。
当我在"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.")
});
}])有关更多详细信息，请参阅下面的快照。
感谢您对解决此问题的帮助。
回答 1
Stack Overflow用户
发布于 2016-09-01 23:43:15
我知道需要什么来停止触发上传操作，这样我们就可以在Angular post()期间提交图像数据，而不是表单提交操作。
从以下位置删除配置属性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;
});而且，为了检索所选图像的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中检索了图像的提交值，然后可以使用$http.post()函数将其发送到服务器，而不是使用传统的表单提交按钮。
我希望上面的内容对你有用。
塔雷克
https://stackoverflow.com/questions/39042732
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号