实现简单的图片上传功能,显示选择图片名和预览图片效果!
涉及知识点:表单美化、正则表达式、文件对象
HTML代码:
<div id="container">
<div id="upload">
<!-- 图片上传 -->
<a><input type="file" name="" onchange="uploadFace(this);"></a>
<!-- 文件名 -->
<input type="text" name="" id="fileName">
</div>
<!-- 图片预览区 -->
<div id="face"><img id="preview" alt=""></div>
</div>
css代码:
@font-face {
font-family:"迷你简趣味";
src: url("迷你简趣味.ttf");
}
body,html{
margin:0;padding:0;
width:100%;height:100%;
background: #3C8FC1;
}
#container{
width:900px;height:350px;
background:url("images/bg.jpg") no-repeat;
margin:auto;
position: relative;
top:20%;
}
#upload{
background:#fff;
height:80px;
border-radius:5px;
padding:10px;
position:absolute;
top:60%;
left:5%;
}
#upload a{
display: inline-block;
width:80px;height:82px;
border:1px solid #ccc;
border-radius:6px 0 0 6px;
background:url("images/icon.png") no-repeat center center;
float:left;
}
#upload a:hover{background-color: #ccc;}
#upload input#fileName{
width:250px;height:80px;line-height: 40px;
border:1px solid #ccc;
border-radius:0 6px 6px 0;
border-left:none;
font-family: "迷你简趣味.ttf";
color:#ccc;
font-size:20px;
padding-left: 5px;
}
#upload a input{
width:80px;height:80px;
opacity:0;
cursor:pointer;
}
#face{
width:285px;height:285px;
position:absolute;
top:31px;right:56px;
border-radius:10px;
overflow:hidden;
}
#face img{
width:285px;height:285px;
}
javascript代码:
//图片更换时候调用
function uploadFace(sender){
//判断选择的是否是图片
if(!sender.value.match(/.jpg|.gif|.jpeg|.bmp|.png/i)){
alert("请选择图片文件!");
}else{
//将文件按名字放置在该input中
var filename=document.getElementById("fileName");
filename.value=sender.files[0].name;
//将选择的图片显示在预览元素中
var preview=document.getElementById("preview");
preview.src=window.URL.createObjectURL(sender.files[0]);
}
}