我使用此javascript代码显示要上传的选定图像:
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
.HTML:
<span class="span4">
<div id="response"></div>
<ul id="image-list">
</ul>
</span>
如何编辑代码,以便选择和显示的图像以 400px 而不是原始大小显示。例:
谢谢!
你可以
说:
img.style.width = "400px";
img.style.height = "400px";
CSS:
#image-list img{
height: 400px;
width: auto;
}
如果您真的想在物理上调整图像大小...如果您的图像在您的服务器上,您可以将其发送到画布,执行调整大小并将其作为 base64 编码字符串提供......
有趣的阅读: 如何在上传前预览图像,获取文件大小,图像高度和宽度?
您可以使用样式在 % 中设置宽度和高度:
img.style.width="100%";
您还可以为此图像添加 css 类(调整大小)
img.resize{
width:540px; /* you can use % */
height: auto;
}
通过包含行...
img.style.width='400px';
img.style.height='400px';
或者您想要的任何尺寸。
创建对象 img 后,您可以使用如下内容:
img.width = "400";
img.height = "400";