JS+HTML实现⾃定义上传图⽚按钮并显⽰图⽚功能的⽅法分析
本⽂实例讲述了JS+HTML实现⾃定义上传图⽚按钮并显⽰图⽚功能的⽅法。分享给⼤家供⼤家参考，具体如下：
在web开发中，上传⽂件功能通过type为file的input标签即可实现。但input的显⽰效果仅为⼀个按钮，且不能修改UI。如果要实现⾃定义上传按钮，⼀般需要设置input为不可见，然后将input与⾃定义界⾯放在同⼀个div中，并将input铺在界⾯上⽅:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图⽚上传</title>
</head>
<body>
<!-- 要将⽗布局的position设置为relative，⽗布局将⽆法包裹input -->
<div >
<!--设置input的position为absolute，使其不按⽂档流排版，并设置其包裹整个布局 -->inputtypefile不上传文件
<!-- 设置opactity为0，使input变透明 -->
<!-- 只接受jpg，gif和png格式 -->
<input id="upload-input" type="file" accept="image/gif, image/jpg, image/png" />
<!-- ⾃定义按钮效果 -->
<div >
<span >上传⽂件：</span>
<img id="upload" src="./upload.png" />
</div>
</div>
</body>
</html>
效果如下：
图⽚上传
这样，⾃定义按钮效果就完成了。但是，这样还不能把图⽚显⽰出来。要实现显⽰上传图⽚功能，可以通过以下⽅法实现:
1. FileReader将⽂件转Base64显⽰。FileReader能够异步读取⽂件，并将⽂件转化为可读取的编码。我们可以通过input获取上传图⽚的file实例。我们
可以通过FileReader将file实例转化为Base64，然后通过img标签加载图⽚的Base64编码。
<script type="text/javascript">
function showImg(input) {
var file = input.files[0];
var reader = new FileReader()
// 图⽚读取成功回调函数
}
}
</script>
2. 通过ateObjectURL创建url。通过该⽅法可以为file实例创建⼀个临时的url，img可以通过该url将图⽚加载出来。由于是临时的url，因
此同⼀个file实例，每次创建的url都会不⼀样:
function showImg(input) {
var file = input.files[0];
var url = ateObjectURL(file)
}
使⽤上述⽅法中的其中⼀种，并将showImg⽅法挂在input的onchange属性上，就能够显⽰图⽚了:
<input id="upload-input"
type="file" accept="image/gif, image/jpg, image/png"
onchange="showImg(this)"/>
显⽰效果如下:
显⽰上传的图⽚
上述代码中，点击input标签时，⼀次性只能选择⼀张图⽚，如果要选择多张图⽚，则要给input添加multiple属性：
<input id="upload-input"
type="file"
accept="image/gif, image/jpg, image/png" multiple onchange="showImg(this)"/>
然后通过多个img显⽰files⾥⾯的图⽚即可，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图⽚上传</title>
</head>
<body>
<!-- 要将⽗布局的position设置为relative，⽗布局将⽆法包裹input -->
<div >
<!--设置input的position为absolute，使其不按⽂档流排版，并设置其包裹整个布局 -->
<!-- 设置opactity为0，使input变透明 -->
<!-- 只接受jpg，gif和png格式 -->
<input id="upload-input" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)" multiple />    <!-- ⾃定义按钮效果 -->
<div >
<span >上传⽂件：</span>
<img id="upload" src="./upload.png" />
</div>
</div>
<div id="imgContainer" ></div>
</body>
<script type="text/javascript">
function showImg(obj) {
var files = obj.files
// ElementById("imgContainer").innerHTML = getImgsByUrl(files)
ElementById("imgContainer"), files)
}
/
/ 使⽤ateObjectURL(file)读取file实例并显⽰图⽚
function getImgsByUrl(files) {
var elements = ''
for (var i = 0; i < files.length; i++) {
var url = ateObjectURL(files[i])
elements += "<img src='"+ url + "' style='width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;' />"
}
return elements
}
// 使⽤FileReader读取file实例并显⽰图⽚
function getImgsByFileReader(el, files) {
for (var i = 0; i < files.length; i++) {
let img = ateElement('img')
img.setAttribute('style', 'width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;')
el.appendChild(img)
var reader = new FileReader()
img.src = sult
}
}
}
</script>
</html>
最终显⽰效果如图:
多图上传
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》
希望本⽂所述对⼤家JavaScript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。