前几天做了一个关于身份认证的页面 需要用户把自己的身份证上传到网站 于是接触到了input file 不的不说这个的确非常的方便 可以直接打开提交文件页面
但是细节部分也有很多
1.对input file 的样式处理 opcity:0; 透明度设置为0 你想怎么玩input就怎么玩.
2.用户上传照片后可以直接预览 直接贴代码
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$(function() {
$("#zhengjian1,#zhengjian2,#zhengjian3").on("change",function() {
var srcs = getObjectURL(this.files[0]); //获取路径
$(this).next().attr("src",srcs); //this指的是input
// $(this).val(''); //必须制空 (非必须)
})
})
(不知道为什么网上的例子直接吧input的val()最后给清空了 然后自己又对input的val做了一个非空的判断 导致自己给自己挖了个坑
,后来发现不设置为空也可以);
3.设置必须上传照片
var zheng1= $("#zhengjian1").val();
if(zheng1==""){
alert("请选取您的证件照");
return false;
}
成功完成.