情况还原:图片上传源代码如下
function InitUploadPic() {
//初始化图片上传
myInitFileInput("CoverUrlfile",
"",
"",
"acc\\user",
"",
"选择图片上传")
.on("fileuploaded",
function (event, data) {
if (picUploadFlag) {
//获取返回的相对路径并拼出绝对路径
var reUrl = data.response.msg.url;
var abUrl = fileUploadUrl + reUrl;
$("#" + currentPic + "Img").attr("src", abUrl);
$("#" + currentPic + "Input").val(reUrl);
}
});
}
图片上传文件类型和图片大小判断js:
//上传图片的合法性判断
$("#CoverUrlfile").change(function () {
var file = this.files[0];
//获取上传文件(图片)的大小(MB)
var fileSize = Number(file.size) / 1024 / 1024;
//获取上传文件(图片)的扩展名
var fileNameArray = file.name.split('.');
var fileTypeValue = "";
if (fileNameArray.length > 1) {
fileTypeValue = fileNameArray[fileNameArray.length - 1];
}
if ((fileTypeValue == "jpg" || fileTypeValue == "png" || fileTypeValue == "jpeg" || fileTypeValue == "gif")) {
if (fileSize > 2) {
$.modalMsg("图片大小不可超过2MB", "error");
picUploadFlag = false;
}
} else {
$.modalMsg("请上传jpg,jpeg,gif或png类型的文件", "error");
picUploadFlag = false;
}
});
上传文件触发的input:
<input type="file" id="CoverUrlfile" style="display: none" />
实现的效果如下:点击图片 打开文件管理选择图片上传
但是 有一天 万恶的产品经理陈某突然提出文件管理器显示的文件要限制 除了那几种格式图片别的类型的文件就不要显示了
mmp.....
于是 经过调查发现可以按照如下设置(调整绑定文件上传功能的input):
<input type="file" id="CoverUrlfile" style="display: none" accept=".jpg,.jpeg,.gif,.png" />
就可以限制只有这四种图片可以显示 其他文件类型默认隐藏 效果如下:
大概就是这样 就是input有一个自带的属性可以配置。。。