Как проверить размер изображения перед загрузкой?

Question

Я хочу проверить размер и расширение изображения перед загрузкой изображения. У меня есть код для расширения изображения, и я хочу ограничить размер изображения. Вот код для расширения изображения:

function ValidateFileUpload() { 
    var fuData = document.getElementById('fileChooser'); 
    var FileUploadPath = fuData.value; 


    if (FileUploadPath == '') { 
     alert("Please upload an image"); 

    } else { 
     var Extension = FileUploadPath.substring(
       FileUploadPath.lastIndexOf('.') + 1).toLowerCase(); 



if (Extension == "gif" || Extension == "png" || Extension == "bmp" 
       || Extension == "jpeg" || Extension == "jpg") { 


      if (fuData.files && fuData.files[0]) { 
       var reader = new FileReader(); 

       reader.onload = function(e) { 
        $('#blah').attr('src', e.target.result); 
       } 

       reader.readAsDataURL(fuData.files[0]); 
      } 

     } 


    else { 
      alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. "); 

     } 
    } 
} 

HTML код

<input type="file" name="image" id="fileChooser" style="height:28px; width:175px;" onchange="return ValidateFileUpload()"> 

Answer 1

function ValidateFileUpload() { 

var fuData = document.getElementById('fileChooser'); 
var FileUploadPath = fuData.value; 


if (FileUploadPath == '') { 
    alert("Please upload an image"); 

} else { 
    var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase(); 



    if (Extension == "gif" || Extension == "png" || Extension == "bmp" 
       || Extension == "jpeg" || Extension == "jpg") { 


      if (fuData.files && fuData.files[0]) { 

       var size = fuData.files[0].size; 

       if(size > MAX_SIZE){ 
        alert("Maximum file size exceeds"); 
        return; 
       }else{ 
        var reader = new FileReader(); 

        reader.onload = function(e) { 
         $('#blah').attr('src', e.target.result); 
        } 

        reader.readAsDataURL(fuData.files[0]); 
       } 
      } 

    } 


else { 
     alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. "); 
    } 
}} 

max_size является максимальный размер файла вы позволили. Вы можете найти хороший пример в следующем сообщении в блоге, которое было написано мной.

html5 file uploading example

Answer 2

Вы можете использовать этот код HTML 5 его испытанный Demo: Demo for this

<input type="file" id="file" /> 

var _URL = window.URL || window.webkitURL; 

$("#file").change(function(e) { 

    var image, file; 

    if ((file = this.files[0])) { 

     image = new Image(); 

     image.onload = function() { 

      alert("The image width is " +this.width + " and image height is " + this.height); 
     }; 

     image.src = _URL.createObjectURL(file); 


    } 

}); 

Answer 3

просто следовать этому примеру http://jsbin.com/ulamor/213/edit?html,css,output

и отправить форму, когда введенные пользователем файлы с вашего желаемого размера файла