如何限制图片上传大小小于2mb？ [英] How to restrict image upload size to less than 2mb?

问题描述

我有一个HTML 选择选项用于上传图片。

 < div class =row smallMargin> 
< div class =col-sm-6> 
附加图片
< / div> 
< div class =col-sm-6> 
< input type =fileng-model =imageaccept =image / *> 
< / div> 
< / div> 
  

如何限制用户上传大于2MB的图片？

解决方案

这个例子应该让你知道如何做到这一点：

HTML

$ b

 < form class =upload-form> 
< input class =upload-filedata-max-size =2048type =file> 
< input type = submit> 
< / form> 
  

JS
< pre-class =lang-js prettyprint-override> $（function（）{
var fileInput = $（'。upload-file'）;
var maxSize = fileInput。 data（'max-size'）;
$（'。upload-form'）。submit（function（e）{
if（fileInput.get（0）.files.length）{
var fileSize = fileInput.get（0）.files [0] .size; //以字节为单位
if（fileSize> maxSize）{
alert（'文件大小大于'+ maxSize + 'bytes'）;
return false;
} else {
alert（'file size is correct - '+ fileSize +'bytes'）;
}
} else {
alert（'请选择要上传的文件'）;
return false;
}

}）;
}）;


I have an html select option for uploading images.

<div class="row smallMargin">
<div class="col-sm-6">
  Attach Image
</div>
<div class="col-sm-6">
  <input type="file" ng-model="image" accept="image/*">
</div>
</div>

How can I restrict the user from uploading images which are larger than 2MB?

解决方案

This example should give you an idea of how to do it:

HTML

<form  class="upload-form">
    <input class="upload-file" data-max-size="2048" type="file" >
    <input type=submit>
</form>

JS

$(function(){
    var fileInput = $('.upload-file');
    var maxSize = fileInput.data('max-size');
    $('.upload-form').submit(function(e){
        if(fileInput.get(0).files.length){
            var fileSize = fileInput.get(0).files[0].size; // in bytes
            if(fileSize>maxSize){
                alert('file size is more than ' + maxSize + ' bytes');
                return false;
            }else{
                alert('file size is correct - '+fileSize+' bytes');
            }
        }else{
            alert('Please select the file to upload');
            return false;
        }

    });
});

这篇关于如何限制图片上传大小小于2mb？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！