隐藏文件上传input样式同时对上传的文件格式进行校验

Posted 2020-10-31 BubbleSort

首先是对文件上传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类型图片!");
}
};