前台获取并限制上传文件大小、上传文件格式

        <input type="file" id="file"/>
        <input type="button" id="btn" value="js查看文件大小"/>
        <input type="button" id="btn1" value="jq查看文件大小"/>
        <script>
            //js获取上传文件大小（单位：字节）
            document.getElementById("btn").onclick=function(){
                alert(document.getElementById("file").files[0].size);
            };
            //jq获取上传文件大小（单位：字节）    jq转js，加下标即可
            $("#btn1").click(function(){
                alert($("#file")[0].files[0].size);
            });
            
        </script>

 

        <div id="fileparent"><input type="file" id="file"/></div>
        <input type="button" id="btn" value="js查看文件大小"/>
        <input type="button" id="btn1" value="jq查看文件大小"/>
        <script>
            //js获取上传文件大小（单位：字节）
            document.getElementById("btn").onclick=function(){
                alert(document.getElementById("file").files[0].size);
            };
            //限制上传文件大小（单位：字节）   
            //限制上传文件格式，可直接判断后缀或者用indexOf方法判断后缀格式是否符合要求
            $("#btn1").click(function(){
                alert($("#file")[0].files[0].size);
                if($("#file")[0].files[0].size>1024000){
                    alert("文件过大！");
                    //清理file里的文件内容
                    $("#fileparent").html('<input type="file" id="file"/>');
                    return;
                }
                alert($("#file").val());
                //获取上传文件路径
                var string=$("#file")[0].value;
                //对路径字符串进行剪切截取
                var arrays=string.split("\\");
                //获取文件名，包含后缀
                var name=arrays[arrays.length-1];
                alert(name);
                //为了辨别格式，统一变小写
                name=name.toLowerCase();
                if(!(name.endsWith("png")||name.endsWith("jpg")||name.endsWith("jpeg"))){
                    alert("请上传jpg、jpeg或png格式的图片！");
                    //清理file里的文件内容
                    $("#fileparent").html('<input type="file" id="file"/>');
                } 
            });