html 代码
表单form 不要忘了加enctype="multipart/form-data"
<li>上传头像：
<input type="file" name="files" onchange="preview(this,'img')">
<div id="img"></div>
</li>
js 代码
<script type="text/javascript">
function preview(file,img){
var prevDiv = document.getElementById(img);
if (file.files && file.files[0]){
//alert(file.files[0].name); //名称
//alert(file.files[0].size); //大小 字节
//alert(file.files[0].type);//类型
var size = file.files[0].size;
if(size > 2 * 1024*1024){
alert("上传大小不符合");
return false;
}
// 获取文件名 包含后缀
var src = file.files[0].name;
// 获取文件后缀
var type=(src.substr(src.lastIndexOf("."))).toLowerCase();
// 判断文件类型
if(type != ".jpg" && type != ".gif" && type !=".jpeg" && type != ".png"){
alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file.files[0]); //将文件以Data URL形式读入页面
reader.onload = function(evt){ //onload 成功读取
//显示文件
prevDiv.innerHTML = '<img src="' + evt.srcElement.result + '" style="max-width:200px;" />';
}
}
}
</script>
image.png
