【HTML5使现上传图片预览】

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			ul li{
				list-style: none;
			}
			textarea{
				resize: none;
			}
			.btn{
				outline: none;
				padding: 8px 10px;
				border: none;
				cursor: pointer;
				color: #fff;
				border-radius: 4px;
			}
			.fr{
				float: right;
			}
			.container{
				width: 600px;
				margin: 20px auto;
				border:1px solid #ddd;
				border-radius: 4px;
				padding: 10px 12px;
			}
			.header{
				position: relative;
			}
			.header_detail{
				height: 40px;
			}
			.send{
				background: blueviolet;
			}
			.view{
				min-height: 100px;
				border: 1px solid black;
				padding: 10px 12px;
				display: none;
			}
			.view .item{
				display: inline-block;
				margin-right: 19px;
				margin-bottom: 5px;
			}
			.view img{
				width:120px;
				height: 120px;
			}
			
			.load{
				display: inline-block;
				width: 24px;
				height: 24px;
				overflow: hidden;
				position: relative;
				background:url(img/load.png) no-repeat;
				background-size: 100% 100%;
			}
			.load input{
				position: absolute;
				right: 0;
				top: 0;
				opacity: 0;
			}
			.list{
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<div class="header_detail">
					<a href="javascript:;" class="load">
						<input type="file" name="file" id="flie" />
					</a>
					<button class="btn fr send">发送</button>
				</div>
				<div class="view" id="view">
					<!--<div class="item">
						<img src="img/1.jpg" />
					</div>-->
					<!--<div class="item">
						<img src="img/2.jpg" />
					</div>
					<div class="item">
						<img src="img/3.jpg" />
					</div>
					<div class="item">
						<img src="img/4.jpg" />
					</div>
					<div class="item">
						<img src="img/5.jpg" />
					</div>-->
				</div>
			</div>
			
				
		</div>
		<script>
			var oFile = document.getElementById("flie")
			var oView = document.getElementById("view")
			var obj = {}    //创建对象
			oFile.addEventListener("change",function(){     //监听
				var fs = this.files[0]
				var reader = new FileReader()  //接口
			reader.onload = function(){    //onload 事件会在页面或图像加载完成后立即发生
					oView.style.display = "block"  //块状
					if(!obj[this.result]){
				var oImg = document.createElement("img")   通过指定名称创建一个元素
						var oDiv = document.createElement("div")
						oDiv.className = "item"
						oImg.src = this.result
						oDiv.appendChild(oImg)    //向节点添加最后一个子节点
						oView.appendChild(oDiv)
						obj[this.result] = this.result
						
					} else {
						alert('不可以重复上传')
					}
				}
				
				
				reader.onprogress = function(){   //onprogress 事件在浏览器下载指定的视频/音频(audio/video)时触发
					console.log("正在读取")
				}
				
				reader.readAsDataURL(fs)  //地址
				
			})
		</script>
	</body>
</html>

PS:此效果图是从桌或者文件内选取照片拖于进去,点击下载那个图片就可以出现图片预览功能,详细解析在里面的每一行关键代码提示!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值