Question

我想将图像上传到服务器，我有两个图像，一个在左侧，当前我正在上传其他的是先前上传的图像在右边。当用户点击＆＃34;上传＆＃34;按钮，上传后我提供了＆＃34; X＆＃34;在点击＆＃34; X＆＃34;之后标记在图像的右侧。我隐藏了上传的图片。再一次如果我上传我之前上传的相同图片，而不上传原因？。如果我上传其他图片，则会上传。

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

}

图片上传后说＆＃34; 1.jpeg＆＃34;在点击＆＃34; X＆＃34;之后，它将显示为左侧图像。在这个图像上，它将隐藏，稍后如果我上传相同的图像说＆＃34; 1.jpeg＆＃34;我无法加载它没有调用$ scope.onImgLoad（）方法，如果我上传其他一些图像说＆＃34; 2.jpeg＆＃34;它显示为左侧图像。为什么＆＃34; 1.jpeg＆＃34;不来？图像标签中的src属性保存前一个图像，它不改变为什么？

Answer 1

当上传一个文件并再次上传同一个文件时，浏览器不会触发更改事件。所以在上传相同文件之前，需要将输入的值设置为空字符串。例如，$（＆＃39; #photoProff＆＃39;）。val（＆＃39;＆＃39;）;

我没有仔细阅读您的代码，如果您提供codepen url地址或jsFiddle网址，我可以了解更多。

Answer 2

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

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

实施例

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

无法使用ng-show和ng-hide

2 个答案: