首先是对文件上传input样式进行隐藏：
<a class="link uploadPhoto" href="#" onclick="upload_file.click()">
<input type="file" class="form-control" id="upload_file" name="upload_file" style="display: none;"onchange="addPic() ;"/>
上传照片</a>
说明：将input元素放到其它任意Element中间，设置格式为style="display: none;"隐藏，同时外面的元素设置onclick（onclick="upload_file.click()"）事件，
当外面的元素被点击是触发input的点击事件，剩下的就是对外面
的元素进行美化的过程啦！
下面就是对上传的文件进行校验啦：
function addPic() {
var objFile = document.getElementById("upload_file");
//重点在这里，可以获得上传的文件；
var file=objFile.files[0];
var name=file.name.toLowerCase();
alert(name);
if (name.indexOf(".png") > -1 || name.indexOf(".gif") > -1
|| name.indexOf(".jpg") > -1) {
//可以利用ajax进行照片回显
} else {
$.ligerDialog.warn("请选择*png,*gif,*jpg类型图片!");
}
};
隐藏文件上传input样式同时对上传的文件格式进行校验
原文地址：https://www.cnblogs.com/self-studyRen/p/8848940.html