使用input file选择图片后，如何在页面显示并修改其样式？

嘿，我来帮你搞清楚这个问题～

一、你的Image对象现在在哪里？ #

你用new Image()创建的imga对象，目前只是存在于内存中的DOM元素，还没有被挂载到页面的DOM树（也就是HTML结构）里。浏览器只会渲染那些已经加入DOM树的元素，所以现在你看不到它。

二、怎么把它显示到屏幕上？ #

你需要把这个内存中的Image对象添加到页面的某个容器里，比如<body>、某个<div>或者其他元素中。举个例子：

方法1：用原生JS添加到DOM

在reader.onload的回调里，添加一行代码：

// 比如添加到body末尾
document.body.appendChild(imga);
// 或者添加到指定容器，比如页面里有个id为img-container的div
// document.getElementById('img-container').appendChild(imga);

方法2：用jQuery添加到DOM

如果你习惯用jQuery，可以这样写：

$('body').append(imga);
// 或者添加到指定容器
// $('#img-container').append(imga);

三、怎么修改它的样式？ #

修改样式有两种常用方式，按需选择：

方式1：直接设置style属性

在添加到DOM之前或之后，直接给Image对象设置样式：

imga.style.width = '300px';
imga.style.height = 'auto';
imga.style.borderRadius = '8px';
imga.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

方式2：添加CSS类（更推荐，便于维护）

先在你的CSS里定义一个自定义类：

.custom-image {
  width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #eee;
}

然后给Image对象添加这个类：

imga.classList.add('custom-image');

完整修改后的代码示例 #

这里把你的代码整合优化一下，确保图片能正常显示并带有样式：

$('#inpfile').change(function(){ 
  var a = this.files[0]; 
  var reader = new FileReader(); 
  reader.readAsDataURL(a); 
  reader.onload = function (e) { 
    var imga = new Image(); 
    imga.src = e.target.result;
    
    // 添加样式
    imga.classList.add('custom-image');
    
    // 添加到页面容器
    document.getElementById('img-container').appendChild(imga);
  } 
});

记得在页面里先准备好容器：

<div id="img-container"></div>

内容的提问来源于stack exchange，提问作者user7461846