Question

我想要隐藏div类=＆＃34;缩略图＆＃34;当没有图像时，如果没有图像，则看起来如此：Image

我的html代码：

protected void onPostExecute(String file_url) {

            pDialog.dismiss();


                    ListAdapter adapter = new SimpleAdapter(
                            Historical_Sites.this, SitesList,
                            R.layout.historical_sites_rows, new String[] {TAG_SITE_NAME},
                            new int[] { R.id.sitenam });

                    setListAdapter(adapter);

        }

和js：

<div class="thumbnail" >
    <img id="bild" src="#" /></div>
    <span class="btn btn-default btn-file">
    Browse <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files); angular.element(this).scope().readURL(this.files);"/>
</span>

正如您所看到的，$scope.readURL = function(files) { //This' to show the image if (files && files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#bild').attr('src', e.target.result); }; reader.readAsDataURL(files[0]); } };显示图像，然后就可以了，但在它看起来并不好之前。我正在使用AngularJS。

Answer 1

首先，删除src="#"代码中的<img />属性。

<img id="bild" />

第二，在需要时（并非总是）将属性src添加到<img />。

<script>
$('#bild').prop('src', e.target.result)
</script>

第三，使用.prop()代替.attr()（jQuery版本＆gt; = 1.6）

Answer 2

您可以在error()上使用img方法来发现无法加载的时间。从那里你可以hide()元素：

$('#bild').error(function() {
    $(this).hide();
});

您还需要在show()处理程序中img reader.onload：

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

Answer 3

您可以使用ng-hide属性，因为您已经在使用AngularJS。通过以下代码，您可以获得save()元素：

<img>

之后，您可以在ng-hide条件下传递src属性并检查非＃值：

angular.element(document.querySelector('#bild'))

这样您就可以使用AngularJS完成任务，快乐的编码！

Answer 4

最初hide div thumbnail，然后将文件display上传到div。

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#bild').attr('src', e.target.result); 
            $('.thumbnail').css('display','block');  
        }

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

}

$("#imginput").change(function () {
    readURL(this);

});

DEMO

当没有图像时隐藏缩略图div

4 个答案: