使用jQuery顯示圖像

Question

當我選擇一個圖像時，有時它不會顯示，但是當我再次單擊時，圖像顯示。

jQuery的

$('#morefiles').change(function (event) { 
    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test($(this).val())) { 
    $ionicPopup.alert({ 
     title: 'Message', 
     template: 'You must select an image file only !' 
    }); 
    $('#morefiles').val(''); 
    } else { 
    var obj = {}; 
    obj.key = event.target.files[0]; 
    obj.value = URL.createObjectURL(event.target.files[0]); 
    $scope.items.push(obj); 
    console.log(JSON.stringify(obj)); 
    $('#morefiles').val(obj); 
    } 
}); 

HTML

<input type="file" multiple="" id="morefiles" accept="image/*" > 

如何解決這個問題呢？當用戶選擇一個圖像時，我需要顯示圖像。提前致謝。

Answer 1

好。我給你..加入這一行：

$scope.$apply(); 

爲下面的代碼：

$('#morefiles').change(function (event) { 
       if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test($(this).val())) { 
        $ionicPopup.alert({ 
         title: 'Message', 
         template: 'You must select an image file only !' 
        }); 
        $('#morefiles').val(''); 
       } else { 
        var obj = {}; 
        obj.key = event.target.files[0]; 
        obj.value = URL.createObjectURL(event.target.files[0]); 
        $scope.items.push(obj); 
        $scope.$apply() 
        console.log(JSON.stringify(obj)); 

        $('#morefiles').val(obj); 
       } 
      }); 

我也遇到了這個問題。但是這樣解決了。我不知道爲什麼我需要做$scope.$apply();。我沒有足夠的時間來挖掘這些東西。如果有人知道它的原因，歡迎您對我的回答發表評論。

Answer 2

試試這個：

$(function() { 
 
    $('#morefiles').on('change', gotPic); 
 
}); 
 

 
function gotPic(event) { 
 
    if (event.target.files.length) { 
 
    for (var i = 0; i < event.target.files.length; i++) { 
 
     if (event.target.files[i].type.indexOf('image/') == 0) { 
 
     var src = URL.createObjectURL(event.target.files[i]) 
 
     $('#preview').append('<img src = ' + src + '><br>'); 
 
     } 
 
    } 
 
    } 
 
}

img { 
 
    width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" multiple="" accept="image/*;capture=camera" id="morefiles"> 
 
<br> 
 
<div id="preview"></div>