在更改Jquery事件時出現問題在IE中預覽圖片

我在IE中預覽圖像時遇到問題。我的表單上有2個HTML控件。隱藏文件上傳按鈕，用戶點擊上傳圖片進行預覽。該代碼在Chrome和其他瀏覽器中完美工作。但在IE中添加圖片時遇到問題。第一次當我上傳文件的時候，但是下次我上傳相同或者不同的圖片時，變化事件正在發揮作用。看起來改變事件不是第一次。有人可以幫助解決這個問題嗎？以下是我的代碼。在此先感謝在更改Jquery事件時出現問題在IE中預覽圖片

HTML

<div class="upldImg"> 
      <img id="imgfakebrowse" ng-click='imageUpload()' src="../Images/upload.png" style="max-width:100%; max-height:100%;" /> 
      <input type="file" id="imgfilebrowse" name="imgfilebrowse" style="display: none"> 
     </div>

的Javascript

//Profile Image Upload 
    $scope.imageUpload = function() { 
     //intitalize the file input tag to Null to clear previous uploads 
     document.getElementById('imgfilebrowse').value = null; 

     $("#imgfilebrowse").trigger('click'); 


     $("#imgfilebrowse").change(function() { 
      $scope.uploadtrigger(this); 
     }); 
    } 



    //function readURL(e) { 
    $scope.uploadtrigger = function (input) { 
     //var file = e.target.files[0]; 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#imgUploaded').attr('src', e.target.result); 

       var CandidateDetails = $scope.contactById; 
       if ($("#imgfilebrowse")[0].files[0] != null && $("#imgfilebrowse")[0].files[0] != '') { 
        image = $("#imgfilebrowse")[0].files[0]; 
       } 
       else { 
        document.getElementById("imgUploaded").src = $scope.contactById.ProfileImage.Url; 
       } 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    }

來源

2016-03-01 user545359

使用ng-src指令。

<div class="upldImg"> 
    <img id="imgfakebrowse" ng-click='imageUpload()' ng-src="{{imgUrl}}" 
     style="max-width:100%; max-height:100%;" /> 
</div>

$scope.imgUrl = "../Images/upload.png" 

$scope.imageUpload = function() { 
    $scope.imgUrl = $scope.contactById.ProfileImage.Url; 
}

它與AngularJS框架更好地整合，並具有更好的跨瀏覽器支持。請參閱AngularJS ng-src Directive API Reference。

來源

2016-03-01 20:42:23 georgeawg

在更改Jquery事件時出現問題在IE中預覽圖片

回答

相關問題