如何用html实现按钮上传图片，并且图片缩略图显示在按钮上方？_随笔

+分采纳

<html>

<head>

<style>

margin: 0

padding: 0

box-sizing: border-box

-webkit-tap-highlight-color: rgba(0,0,0,0)

}

</style>

</head>

<body>

</body>

</html>

const [el,stage] = [

document.querySelector('input'),

document.querySelector('div'),

]

function upload({target}){

if(!target.files.length) return

for(const file of target.files){

const img = new Image()

img.src = URL.createObjectURL(file)

stage.appendChild(img)

}

</script>

请把下面段代码保存为test.html，跟s1.jpg, s2.jpg, s3.jpg和b1.jpg, b2.jpg, b3.jpg六张图片放在一起，应该就可以实现点击小图片，显示大图片。希望对你有用。

<html>

<body>

var Simgs = ["s1.jpg", "s2.jpg", "s3.jpg"]

var Bimgs = ['b1.jpg', 'b2.jpg', 'b3.jpg']

for(x in Simgs)

{document.write("<img id="+Bimgs[x]+" src="+Simgs[x]+" onclick=showbig(this.id) />")}

function showbig(sid){ document.getElementById("showbig").src=sid}

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

如何用html实现按钮上传图片，并且图片缩略图显示在按钮上方？