如何将图片上传大小限制在2mb以下？

Question

我有一个用于上传图片的html select选项。

<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>

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

Answer 1

此示例应该让您了解如何执行此操作：

<强> 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;
        }

    });
});