我正在使用 ng-flow 文件上传：
https://github.com/flowjs/ng-flow
我的代码似乎有问题或有问题。我的工作基于下载提供的基本图像示例。
我正在尝试创建一个页面，允许使用一个应用程序和两个控制器上传两个图像。每张图片都是一张签名图片，一张给鉴定人，一张给主管。
无论我尝试什么，它都不起作用。
这两个图像中的每一个都有一个单独的放置区域，它们被视为一个图像。每次我将图像拖放到任何元素时，两者的文件预览都是相同的。
我试过用一个控制器，也用两个控制器，结果是一样的。一个图像将显示在两个元素上。
请参阅下面的快照和代码示例。
感谢你的帮助。
<html >
<head>
<meta charset="ISO-8859-1">
<title>Signature Test</title>
<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"/>
<link href="./style.css" rel="stylesheet"/>
<style>
</style>
</head>
<body ng-app="app" flow-prevent-drop
flow-init
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
flow-files-submitted="$flow.upload()">
<div class="container" >
<h1>flow image example</h1>
<hr class="soften"/>
<div class="signature-container" >
<div >
<div ng-controller="appraiserSignature" flow-file-added="someHandlerMethod($file, $event, $flow)">
<h4>Appraiser Signature </h4>
<div class="digital-signature" ng-hide="$flow.files.length"
flow-drop flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
<img id="emptySign" src="images/sign-here-image.jpg" />
</div>
<div class="digital-signature" flow-drop ng-show="$flow.files.length"
flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
<img style="max-height:100%" 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>
<div id="app2">
<div>
test scope {{$scope.test}}
<h4>Supervisor Signature</h4>
<div class="digital-signature" ng-hide="$flow.files.length"
flow-drop flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
<img src="images/sign-here-image.jpg" />
</div>
<div class="digital-signature" flow-drop ng-show="$flow.files.length"
flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}" ng-style="style">
<img style="max-height:100%" 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.<br>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
var app = angular.module('app', ['flow'])
.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.defaults = {
target: 'upload.php',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4,
singleFile: true,
};
console.log('app1 config', flowFactoryProvider);
console.log('app1 config - flowFactoryProvider.opts', flowFactoryProvider.opts);
flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
// Can be used with different implementations of Flow.js
// flowFactoryProvider.factory = fustyFlowFactory;
}]);
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
};
app.controller('appraiserSignature',
function ($scope) {
$scope.someHandlerMethod = function ($file, $event) {
console.log('someHandlerMethod', $event.target.parentNode);
}
$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
console.log('flow::fileAdded - appraiser signature', event, $flow, flowFile);
console.log('event.target = ', event.target)
//flowFile.pause();
//event.preventDefault();//prevent file from uploading
//cancelBubble(event);
//$flow.upload = null;
//$flow.preventEvent(event);
//console.log("flowFile.pause() executed.");
});
console.log('in appraiserSignature controller');
//debugger;
console.log('appraiser Signature controller', $scope);
});