zoukankan      html  css  js  c++  java
  • 前台获取并限制上传文件大小、上传文件格式

            <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"/>');
                    } 
                }); 
                
  • 相关阅读:
    3个检测浏览器UserAgent信息的网站
    linux系统下配置网桥(CentOS 5.5)
    squid封禁不带UserAgent的请求
    iptables透明网桥无法使用透明代理错误
    Squid修改用户浏览器的Useragent信息
    MySQL主从复制(MasterSlave)与读写分离(MySQLProxy)实践
    js中格式化时间
    js获取当前月的第一天和最后一天
    JS String.toDate
    Js获取当前日期时间及其它操作
  • 原文地址:https://www.cnblogs.com/57rongjielong/p/7896977.html
Copyright © 2011-2022 走看看