电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到js实现图片上传前预览的问题，如果我们遇到了js实现图片上传前预览的情况，该怎么处理怎么...
电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到js实现图片上传前预览的问题，如果我们遇到了js实现图片上传前预览的情况，该怎么处理怎么才能解决js实现图片上传前预览带来的困扰呢，对于这样的问题其实我们只需要电脑前端编辑器HBuilder或者是一个纯文本编辑器也可以第一步：代码编写。1、代码如下所示：
工具/原料
电脑
前端编辑器HBuilder或者是一个纯文本编辑器也可以
第一步骤：单图片上传前预览。
第一步：代码编写。
1、代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单图片上传预览</title>
</head>
<body>
<div align="center">
<img width="400" height="250" id="xmTanImg"/><br/>
<input type="file" id="pic" name="pic" onchange="xmTanUploadImg(this)"/>
<input type="button" value="上传图片"/><br />
</div>
<script>
//选择图片，马上预览
function xmTanUploadImg(obj) {
var file = obj.files[0];
//file.size 单位为byte 可以做上传大小控制
console.log("file.size = " + file.size);
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
console.log("成功读取....");
var img = document.getElementById("xmTanImg");
img.src = e.target.result;
//或者 img.src = this.result; //e.target == this
}
reader.readAsDataURL(file)
}
</script>
</body>
</html>
第二步：测试。
1、打开页面
2、选择需要预览的图片如下所示
3、测试成功。
第二步骤：多图片上传预览。
第一步：代码实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多图片上传预览</title>
<style>
.input-file-box{
border: 1px solid gray;
width: 150px;
height: 150px;
position: relative;
text-align: center;
border-radius: 8px;
}
/*文字描述*/
.input-file-box > span{
display: block;
width: 100px;
height: 30px;
position: absolute;
top: 0px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: gray;
}
/*input框*/
.input-file-box #uploadfile{
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
</style>
</head>
<body>
<div align="center">
<div align="center" id="imgs" />
注意事项
谷歌浏览器
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
