input file 选择图片并显示

最新推荐文章于 2024-06-06 10:36:09 发布

qaakd

最新推荐文章于 2024-06-06 10:36:09 发布

阅读量3.5k

点赞数 1

分类专栏： js HTML5 web前端

本文链接：https://blog.csdn.net/qaakd/article/details/105146017

版权

js 同时被 3 个专栏收录

83 篇文章 0 订阅

订阅专栏

web前端

53 篇文章 0 订阅

订阅专栏

HTML5

22 篇文章 0 订阅

订阅专栏

<!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>

qaakd

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
input file 选择图片并显示

<!doctype html><html><head><meta charset="utf-8"><title>选择图片并显示</title></head><body><div id="pic_list"><input type="file" name="files...
复制链接

扫一扫