关于input file 的一些

来源:互联网 发布:淘宝助理5.5官方版 编辑:程序博客网 时间:2024/05/22 17:37

前几天做了一个关于身份认证的页面 需要用户把自己的身份证上传到网站 于是接触到了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;
   }
  成功完成.


原创粉丝点击