无法使用 ng-show 和 ng-hide 上传相同的图像答案

【问题标题】：not able to upload same image with ng-show and ng-hide无法使用 ng-show 和 ng-hide 上传相同的图像
【发布时间】：2016-11-21 20:29:47
【问题描述】：

我想上传图片到服务器，我有两张图片，一张在左边，我正在上传另一个是之前上传到右边的图片。当用户单击“上传”按钮时会出现左侧图像，上传后我在图像右侧提供了“X”标记，单击“X”后我隐藏了上传的图像。再一次如果我上传了我之前上传的相同图片，但没有上传，为什么？ .如果我上传其他图片，它正在上传。

 <div  ng-click="deleteLocalfile()" ng-hide="deletePreviewImage" ng-show="showImage" class="img-wrap">
  <span  class="close">&times;</span>
  <img   ng-src="{{imagepreviewUrl}}" ng-if="imagepreviewUrl"  style="width: 100px; height: 100px;" alt="" data-id="103">
</div>
<a   ng-show="user.photo.photoProof" href><img ng-src="{{tabindexUrl}}" style="width: 100px; height: 100px;" alt=""></a>
<div class="fileUpload btn btn-primary" flow-attrs="{accept:'image/*'}">
  <span>Upload</span>
  <input  data-flow-btn type="file" ng-model="user.photo.photoProof" name="photoProof" id="photoProff"  class="upload"/>
</div>`<div class="list-group mt-md mb-0"  data-ng-show="$flow.files.length" data-ng-repeat="file in $flow.files">
  <div class="box-layout list-group-item" data-ng-hide="fileUploadSuccess">
    <div class="col-xs-2 va-m">
      <span class="img-wrapper img-rounded" style="width:50px;"><img imageonload="onImgLoad('photo')" flow-file-added="validate($file)" flow-img="file" alt="" style="width: 50%; height: auto;"></span>
    </div>
    <div class="col-xs-5 va-m">
      <div class="progress progress-sm nm">
        <div class="progress-bar" ng-style="{width: (file.progress() * 100) + '%'}"></div>
      </div>
      <div class="col-xs-5 va-m"><strong>{{file.name}}</strong >  {{file.size}} bytes</div>
    </div>
  </div>
</div>`

控制器代码：

 $scope.onImgLoad = function(type){
  $scope.deletePreviewImage = true;
  $scope.previewImageUrl = '';
  switch (type){
    case 'photo':
      MyService.getBase64Content($scope.flow.photoDoc.files[0].file, function(e){
        $scope.user.photo.photoProofContent = e.target.result.substr(e.target.result.indexOf(',') + 1);
        $scope.imagepreviewUrl = 'data:image/jpeg;base64,'+ $scope.user.user.photoProofContent.replace(/['"]+/g, '');
        $scope.previewImageUrl = $scope.imagepreviewUrl;
        $scope.deletePreviewImage = false;
 });

deleteLocalfile 方法：

$scope.deleteLocalfile = function(){

$scope.showImage = false;
      $scope.deletePreviewImage = true;

}

图片上传后说“1.jpeg”，它会显示为左侧图片，点击这张图片上的“X”后，它会隐藏，稍后如果我上传相同的图片说“1.jpeg”我不能加载它不调用 $scope.onImgLoad() 方法，如果我上传一些其他图像说“2.jpeg”它显示为左侧图像。为什么“1.jpeg”不来？图像标签中的 src 属性保存上一张图像，它没有改变为什么？

【问题讨论】：

标签： javascript angularjs html image

【解决方案1】：

当上传一个文件后再次上传同一个文件时，浏览器不会触发change事件。所以在上传同一个文件之前，你需要将输入的值设置为空字符串。例如，$('#photoProf').val('');

我没有仔细看你的代码，如果你提供codepen url地址或jsFiddle url地址，我可以知道更多。

【讨论】：

嘿，非常感谢您告诉我们上传相同文件时浏览器不会触发更改事件。稍后在输入元素上使用此代码 onchange="angular.element(this).scope().onImgLoad('photo')" 。

【解决方案2】：

对您来说非常简单的解决方案是 - 使用 ng-if 代替 ng-show 或 ng-hide。

ng-if 仅在条件为 ture 时才会在 html 中加载元素，否则不会。而在 ng-show 或 ng-hide 的情况下，仅图像的显示分别设置为 block 或 none，但图像始终在 DOM 中。

例子

<img ng-src='someurl' ng-if="condition==true" />

【讨论】：