【问题标题】：AngularJS: one upload button that uploads three imagesAngularJS：一个上传三张图片的上传按钮
【发布时间】：2018-02-08 07:39:25
【问题描述】：

简介

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

有没有办法让你每次点击一个按钮时，它都会上传一张新图片？

问题

由于每次上传都有不同的功能，我想在上传图片后隐藏按钮。所以隐藏按钮 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>

【问题讨论】：

是否有理由不一次全部上传？
@PatrickEvans 如果每个图像都可以像 1 2 和 3 一样上传到每个函数。
我明白了。你能告诉我们insertImageFirst()函数吗？
@KarolTrybulec 上传三张图片三种不同的功能insertImageThirdinsertImageSecondinsertImageFirst
IMO 你可以做 onchange="insertImage(1)", onchange="insertImage(2)" 并从你的单个函数内部测试传递的参数。 function insertImage(num){ if(num==1)..... }

标签： javascript angularjs file-upload

【解决方案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>

【讨论】：

【解决方案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

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;
  }
})

<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>

【讨论】：