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