文章/答案/技术大牛

发布

社区首页 >问答首页 >无法在一个ng-flow应用下上传两个独立的镜像

问无法在一个ng-flow应用下上传两个独立的镜像
EN

Stack Overflow用户

提问于 2016-08-23 05:33:50

回答 1查看 332关注 0票数 0

我正在使用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);
    });

ng-flow

angularjs

image

file-upload

回答 1

Stack Overflow用户

发布于 2016-09-29 14:08:41

问题是现在在body元素上只有一个flow-init。

这意味着您在body中的两个放置区域都引用了相同的$flow对象(由flow-init指令创建)。

因此，既然只有一个 $flow对象，尽管您有两个不同的

<img style="max-height:100%" flow-img="$flow.files[0]" />

为了显示两个不同的图像，两个$flow.files[0]将始终指向相同的位置。

为了解决这个问题，你必须有两个不同的flow-init，每个drop区域一个。

评估人签名

<div>
    <h4>Appraiser Signature </h4>
    <div ng-controller="appraiserSignature" flow-init 
                     flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
                     flow-files-submitted="$flow.upload()">
        <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>

SupervisorSignature

<div id="app2">
    <div>
        test scope {{$scope.test}}
        <h4>Supervisor Signature</h4>
        <div ng-controller="supervisorSignature" 
                  flow-init 
                  flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" 
                  flow-files-submitted="$flow.upload()>
                <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>
         </div>
                <p>
                  Only PNG,GIF,JPG files allowed.<br>
                </p>
        </div>
</div>

Complete HTML

<body ng-app="app" flow-prevent-drop>
    <div class="container">
        <h1>flow image example</h1>
        <hr class="soften" />
        <div class="signature-container">
            <div>
                <h4>Appraiser Signature </h4>
                <div ng-controller="appraiserSignature" flow-init flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()">
                    <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 ng-controller="supervisorSignature" flow-init flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()>
                <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>
                </div>
                <p>
                  Only PNG,GIF,JPG files allowed.<br>
                </p>
            </div>
        </div>  
    </div>
</div>
</body>

注意：我已经在第二个拖放区域添加了supervisorSignature控制器。

希望这能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39089080

复制

相似问题

问无法在一个ng-flow应用下上传两个独立的镜像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在一个ng-flow应用下上传两个独立的镜像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在一个ng-flow应用下上传两个独立的镜像
EN