input file 选择图片并显示

最新推荐文章于 2024-07-19 18:08:01 发布

原创最新推荐文章于 2024-07-19 18:08:01 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

83 篇文章

订阅专栏

web前端

53 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的功能，允许用户选择多张图片并在页面上预览这些图片。当用户选择图片后，通过JavaScript函数setImagePreview设置每张图片的预览，限制最多上传9张图片，并使用File API读取文件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择图片并显示</title>
</head>

<body>

function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
//var imgObjPreview=document.getElementById("preview");
var list = document.getElementById("pic_list");
var button = document.getElementById("file_a");
if(docObj.files) {
if(docObj.files.length==9){
alert("图片数量不能超过9张");
}
//火狐下，直接设img属性
for(var i=0;i<docObj.files.length;i++){
var imgObjPreview = document.createElement("img");
imgObjPreview.className = "dtbj_pic";
imgObjPreview.name="images";
imgObjPreview.style.width = '60px';
imgObjPreview.style.height = '60px';
imgObjPreview.style.margin = "10px";
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
list.insertBefore(imgObjPreview,button);
}
}
return true;
}

</script>

</body>
</html>