上传图像并使用javascript显示小图像

Uploading image and displaying it small with javascript

本文关键字：图像 javascript 显示      更新时间：2023-09-26

所以，我有这个工作JavaScript，它加载了一个图像，用户上传到屏幕上显示它的HTML中。

但是，它显示的图像没有最大高度或宽度，因此它将页面上的按钮移动到看不到或按下的位置。这包括提交按钮（如果上传的图像足够大）。

那么，有没有办法使"上传"的图像显示非常小：比如最大高度 30px？

$(function(){
    $('#user_avatar').change(function(e){
        var files = event.target.files;
        var image = files[0];
        for (var i = files.length - 1; i >= 0; i--) {
            var reader = new FileReader();
            var file = files[i];
            reader.onload = function(file) {
              var img = new Image();
              img.src = file.target.result;
              $('#inputpic').attr('src', file.target.result);
            }
            reader.readAsDataURL(image);
        };
    });
});

我尝试添加：

  theimage = getElementById('inputpic')
  theimage.style.height='10px';

但这没有效果。

编辑 1

JS与之对话的html.slim：

= image_tag('temp.png', id: "inputpic", class: 'tiny_image_display')

我制作的 SCSS：

.tiny-image-display {
  max-height: 30px;
}

您可以在 CSS 中非常轻松地设置它：

#inputpic {
  max-height: 30px;
}

$(function(){
    $('#user_avatar').change(function(e){
        var files = event.target.files;
        var image = files[0];
        for (var i = files.length - 1; i >= 0; i--) {
            var reader = new FileReader();
            var file = files[i];
            reader.onload = function(file) {
              var img = new Image();
              img.src = file.target.result;
              img.height = "30";
              $('#inputpic').attr('src', file.target.result);
            }
            reader.readAsDataURL(image);
        };
    });
});
相关文章：