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"/>');
                    } 
                }); 
                
  • 相关阅读:
    windows10安装vmware14教程
    MySQL变量的使用
    软考和软件设计师
    Java web加密之将应用从http换成https的方法
    cmd命令net和sc
    cmd命令 taskkill
    CSS系列:CSS的继承与层叠特性
    CSS系列:CSS选择器
    CSS系列:在HTML中引入CSS的方法
    Sql Server系列:索引维护
  • 原文地址:https://www.cnblogs.com/57rongjielong/p/7896977.html
Copyright © 2011-2022 走看看