隐藏文件上传input样式同时对上传的文件格式进行校验，上传服务器后回显预览...

首先是对文件上传input样式进行隐藏：

<a class="link uploadPhoto" href="#" οnclick="upload_file.click()">

<input type="file" class="form-control" id="upload_file" name="upload_file" style="display: none;"οnchange="addPic() ;"/>

上传照片</a>

说明：将input元素放到其它任意Element中间，设置格式为style="display: none;"隐藏，同时外面的元素设置onclick（οnclick="upload_file.click()"）事件，

当外面的元素被点击是触发input的点击事件，剩下的就是对外面

的元素进行美化的过程啦！

下面就是对上传的文件进行校验啦：

//上传照片
function addPic() {
var fileElement = document.getElementById("upload_file")

//获得上传的文件对象

var file = fileElement.files[0];

var name = file.name.toLowerCase();
if (name.indexOf(".png") > -1 || name.indexOf(".gif") > -1
|| name.indexOf(".jpg") > -1) {

//必须使用FormData对象才能成功上传
var formdata = new FormData();

//封装fromdata对象
formdata.append("file", file);
formdata.append("btype", "userheadPicture")

//发送ajax请求
$.ajax({
url : "${ctx}/cjbb/authority/authUser/upload.ht",
type : 'POST',
data : formdata,
async : false,
cache : false,
contentType : false,
processData : false,
dataType:"json",

//这里我后台返回的是map；
success : function(data) {

//对照片进行回显
$("#personPic").attr("src", data.data.picurlView);

//业务需要在数据库中用户表保存用户头像的保存地址
$("#headPicture").val(data.data.picurl);
alert("头像上传成功");
},
error : function(data) {
alert("头像上传失败！");
}
});
} else {
$.ligerDialog.warn("请选择*png,*gif,*jpg类型图片!");
}
};

转载于:https://www.cnblogs.com/self-studyRen/p/8848940.html