否则不更改和读取与图像大小上传jQuery

Question

我需要检查图像大小。

当我上传一个图像时，如果图像文件大小大于1MB，它就会显示一条消息，但是当我上传一个文件大小小于1MB的图像时，该消息不会隐藏。

这是我的代码：

html

    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />
    <div class="alert alert-danger imgSize">fdfdfdfdfdf</div>

js

 $(document).on('change' ,'#image-file',function() {
   if(this.files[0].size >= 1024){

     $(".imgSize").fadeIn();

   }else{

     $(".imgSize").fadeOut();
     alert("sdsd");

   }
 });

https://codepen.io/hesham-farag/pen/YJoKwm

Answer 1

在js中，文件大小以字节为单位：

尝试以下代码：

​

$(document).on('change' ,'#image-file',function() {
   if(this.files[0].size >= (1 * 1024 * 1024)){
     
     $(".imgSize").html("Image size is <b>more</b> than 1 mb.");
     
   }else{
     
     $(".imgSize").html("Image size is <b>less</b> than 1 mb.");
     
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upload image:<input id="image-file" type="file" name="file" />

<br><br>Message: 
<div class="imgSize"></div>

​

Answer 2

您的jQuery是正确的，问题在于文件大小。您正在接收一个以字节为单位的值，并与另一个以千字节为单位的值进行比较，这就是为什么微积分看起来是错误的。

只需将值更改为1048576 (相当于1MB)，它就会工作。