The DEMO

Question

简介

目前我有三个上传按钮，使用三种不同的功能上传三个不同的图像。

有没有办法让每次点击一个按钮，它会上传一个新图像？

问题

由于每个上传都有不同的功能，我想在上传图片后隐藏按钮。因此隐藏按钮2和3并使用按钮1上传，打印出图像名称但隐藏第一个按钮并显示第二个。重复此过程，直到使用所有按钮（如果用户全部使用）。

更新

3张图片必须上传到自己的功能。

第一个图片到insertImageFirst

第二次到insertImageSecond

第三次到insertImageThird

我的代码

<div class="controls row center-text">
        <input type="file" id="FirstImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageFirst()"/>

        <input type="file" id="SecondImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageSecond()"/>

        <input type="file" id="ThirdImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageThird()"/>
</div>

Answer 1

我创建了一个简单的解决方案，也将用户限制为只有三张图片。

然而，我知道它的混乱并且还隐藏了上传图像的标签。

任何人都可以改进这一点，以显示如何在没有多次上传的情况下显示标签或如何执行此操作。

我的代码

<div class="controls row center-text">
    <input type="file" id="FirstImageID" name="image" class="" accept="image/*"
           onchange="angular.element(this).scope().insertImageFirst()"
           ng-click=" showDiv1=true"
           ng-show="!showDiv1"/>


    <div ng-show="showDiv1">
        <input type="file" id="SecondImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageSecond()"
               ng-click=" showDiv2=true"
               ng-show="!showDiv2"/>
    </div>

    <div ng-show="showDiv2">
    <input type="file" id="ThirdImageID" name="image" class="" accept="image/*"
           onchange="angular.element(this).scope().insertImageThird()"/>
    </div>
</div>

Answer 2

考虑使用自定义指令，使<input type=file>能够自动使用ng-change指令。

<input type="file" id="FirstImageID" name="image1" class="" accept="image/*"
       files-input ng-model="fileList1" ng-change="insertImage(1,fileList1[0])"
       ng-disabled="disabledList[1]" />

<input type="file" id="SecondImageID" name="image2" class="" accept="image/*"
       files-input ng-model="fileList2" ng-change="insertImage(2,fileList2[0])"
       ng-disabled="disabledList[2]" />

<input type="file" id="ThirdImageID" name="image3" class="" accept="image/*"
       files-input ng-model="fileList3" ng-change="insertImage(3,fileList3[0])" 
       ng-disabled="disabledList[3]" />

app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

app.controller("ctrl", function($scope) {
  var vm = $scope;
  vm.disabledList = [];
  vm.insertImage = function(num,file) {
    vm.disabledList[num]=true;
  }
});

使用ng-change指令，可以使用AngularJS表达式的强大功能在每次选择后操作ng-disabled指令。

The DEMO

＆＃13;

angular.module("app",[])
.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})
.controller("ctrl", function($scope) {
  var vm = $scope;
  vm.completedList = [];
  vm.disabledList = [];
  vm.insertImage = function(num,file) {
    vm.completedList.unshift("num="+num+" file="+file.name);
    vm.disabledList[num]=true;
  }
})

＆＃13;

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<input type="file" id="FirstImageID" name="image1" class="" accept="image/*"
   files-input ng-model="fileList1" ng-change="insertImage(1,fileList1[0])"
   ng-disabled="disabledList[1]" />
<br>
<input type="file" id="SecondImageID" name="image2" class="" accept="image/*"
   files-input ng-model="fileList2" ng-change="insertImage(2,fileList2[0])"
   ng-disabled="disabledList[2]" />
<br>
<input type="file" id="ThirdImageID" name="image3" class="" accept="image/*"
   files-input ng-model="fileList3" ng-change="insertImage(3,fileList3[0])" 
   ng-disabled="disabledList[3]" />
<br>
<div ng-repeat="item in completedList track by $index">
  {{item}}
</div>
</body>

＆＃13;

AngularJS：一个上传三个图像的上传按钮

2 个答案:

The DEMO