<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<style type="text/css">
label{
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0px 10px;
background-color: #1E9FFF;
color: #fff;
border-radius: 5px;
margin-bottom: 5px;
}
img{
height: 200px;
width: 300px;
border: 1px solid #D8D8D8;
}
</style>
</head>
<body>
<label for="file" >选择本地图片</label>
<input type="file" style='display: none;' multiple="multiple" id='file' />
<div id='img-cont'></div>
</body>
<script type="text/javascript">
var reader;
document.getElementById('file').onchange=function(){
var imgfile=this.files;
for(var i=0,len=imgfile.length;i<len;i++){
var imageType = /^image\//;
if (!imageType.test(imgfile[i].type)) {
console.log('文件：'+imgfile[i].name+'不是图片，请选择图片！');
continue;
}else{
if(imgfile[i].size>300*1024){
console.log('图片尺寸不超过300kb！');
continue;
}else{
var img=document.createElement('img');
document.getElementById('img-cont').appendChild(img);
reader = new FileReader();
reader.onload = (function (img) {
return function(e){
img.src=e.target.result;
console.log(e.target.result);
}
})(img);
reader.readAsDataURL(imgfile[i]);
}
}
}
}
</script>
</html>pc 图片上传
猜你喜欢
转载自blog.csdn.net/cxz792116/article/details/80894670
今日推荐
周排行