我想获取我使用html上传的文件大小,但它无法正常工作

时间:2014-09-19 04:45:09

标签: javascript html

我想获取我使用html上传的文件大小,但它无效。

这是我的代码

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function() {
            $("document").ready(function() {
                $("#myFile1").change(function() {
                    var f1 = document.getElementById("myFile1").value;
                    if ((f.size || f.fileSize) == 09765625)
                    {
                        alert("file size is less than 1mb");
                    }
                    else
                    {
                        alert("file size should not exceed more than 1mb");
                        $(this).val($.data(this, 'f'));
                        return false;
                    }
                });
            });

        })
    </script>
  </head>
  <body>
     <input type='file' name="file" id="myFile1" />
  </body>
</html>

3 个答案:

答案 0 :(得分:1)

应为f

而不是f1

var f = document.getElementById("myFile1");

当您在条件中检查变量f时。所以相应地改变它

您应该使用以下

检查文件大小
var f = $("#myFile1")[0].files[0].size;

$("#myFile1").change(function() {
         var f1 = document.getElementById("myFile1").value; // will get file input value
         var size = ($("#myFile1")[0].files[0].size); // get file size here

         if (size < 1048576) {
             alert("file size is less than 1mb");
         } else {
             alert("file size should not exceed more than 1mb");
             $(this).val($.data(this, 'f'));
             return false;
         }
     });

Demo

答案 1 :(得分:0)

document.getElementById("myFile1").value仅返回文件名。

输入文件字段是数组中的返回文件信息,因此使用[0]作为第一个文件,尝试这种方式

var file_size = document.getElementById("myFile1").files[0].size

另一个问题:您已在f1变量中分配了Dom参考并在f条件中使用IF ..条件中使用f1变量,许多错误会尝试更新此代码

var f1 = document.getElementById("myFile1").files[0];
if (f1.file_size < 1048576)
{
   alert("file size is less than 1mb");
}

$(function() {
            $("document").ready(function() {
                $("#myFile1").change(function() {
                    var f1 = document.getElementById("myFile1").files[0];
                    if (f1.file_size < 1048576)
                    {
                        alert("file size is less than 1mb");
                    }
                    else
                    {
                        alert("file size should not exceed more than 1mb");
                        $(this).val($.data(this, 'f'));
                        return false;
                    }
                });
            });

        })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='file' name="file" id="myFile1" />

答案 2 :(得分:0)

我更改了以下代码。


    <html>
     <head>
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript">
        $(function() {
            $("document").ready(function() {
                $("#myFile1").change(function() {
                    var f1 = this.files[0];
                    if (f1.size  < 1048576)
                    {
                        alert("file size is less than 1mb");
                    }
                    else
                    {
                        alert("file size should not exceed more than 1mb");
                        $(this).val($.data(this, 'f1'));
                        return false;
                    }
                });
            });

        })
    </script>
  </head>
  <body>
     <input type='file' name="file" id="myFile1" />
  </body>
</html>

您正在进行不正确的DOM操作,最好使用Jquery并尝试使用一些优秀的在线编辑器,例如w3c

此外,必须像声明 f1 变量一样处理命名约定并尝试使用 f

此帖也是see