Question

我有一个表单，我想验证最大大小为9MB的输入类型文件。我怎样才能做到这一点？

<form id="pform" method="post" name="jform">

<input type="file" name="file" id="filed" required="required">

<input type="submit" value="PUBLISH PHOTO" id="hello" name="publishpost" >

</form>

Answer 1

尝试类似：

$('#filed').change(function(){

var filesize =  this.files[0].size/1024/1024; //(IN MB)

});

Answer 2

   <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" > </script>
   <script type="text/javascript">
     function GetFileSize(fileid) {
     try {
     var fileSize = 0;
     //for IE
     if ($.browser.msie) {
     //before making an object of ActiveXObject, 
    //please make sure ActiveX is enabled in your IE browser
      var objFSO = new ActiveXObject("Scripting.FileSystemObject"); 
      var filePath = $("#" + fileid)[0].value;
      var objFile = objFSO.getFile(filePath);
      var fileSize = objFile.size; //size in kb
      fileSize = fileSize / 1048576; //size in mb 
      }
     //for FF, Safari, Opeara and Others
      else {
      fileSize = $("#" + fileid)[0].files[0].size //size in kb
      fileSize = fileSize / 1048576; //size in mb 
      }
      alert("Uploaded File Size is" + fileSize + "MB");
      }
      catch (e) {
      alert("Error is :" + e);
      }
      }
    </script>


    <form id="pform" method="post" name="jform">

    <input type="file" name="filed" id="filed" required="required">

    <input type="button" value="PUBLISH PHOTO" id="hello" name="publishpost"  onclick="GetFileSize('filed');" >

    </form>

Answer 3

 <div class="col-sm-9 col-lg-6 col-xs-12 col-md-9">
                    <div class="input-group">
                        <input type="text" class="form-control"  name="uploadFile"  readonly id="uploadFile">
                        <span class="input-group-btn">
                            <span class="btn btn-primary btn-file">
                                Browse&hellip; <input type="file" name="file" id="filed" required="required">     
                            </span>
                        </span>
                    </div>
                    <div id="spanFileUploadMsg">


                    </div>

                </div>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" > </script>
   <script type="text/javascript">



 $(document).on('change', '.btn-file :file', function() {

        var input = $(this),numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');

        input.trigger('fileselect', [numFiles, label]);
        genrateSizeMsg(this.files[0])

    });

    function genrateSizeMsg(f)
    {

        var f = f.size;
            f = f / 1048576;

            if (f > 9)
            {

                $("#spanFileUploadMsg").html("The file you are trying to upload is too large (max 9MB)");/* This  message will be display in "spanFileUploadMsg" id when size is greater than 9MB */
                return false;
            }

        return true;
    }
 </script>

如何在Jquery中验证输入类型文件大小？

3 个答案: