私は ng-flow ファイルのアップロードを使用しています:
https://github.com/flowjs/ng-flow
私のコードに問題があるか、問題があるようです。私の作品は、ダウンロードで提供される基本的なイメージ サンプルに基づいています。
1 つのアプリケーションと 2 つのコントローラーを使用して 2 つの画像をアップロードできるページを作成しようとしています。各画像は署名画像で、1 つは評価者用、もう 1 つは監督者用です。
何を試してもうまくいきません。
2 つの画像にはそれぞれ 1 つの個別のドロップ領域があり、1 つの画像のように扱われます。画像を要素のいずれかにドロップするたびに、ファイルのプレビューは両方で同じになります。
1 つのコントローラーと 2 つのコントローラーを使用しようとしましたが、結果は同じです。1 つの画像が 2 つの要素に表示されます。
以下のスナップショットとコード サンプルを参照してください。
あなたの助けに感謝。
<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);
});