73853

How to check image width and height before upload

Question:

for picture upload i wrote following html code :

<input type="file" id="upload" class="im" onchange="fileSelectHandlerProfile('defaultProfile','true')" style="cursor:pointer"/>

when we done with select image,

this code will be fired :

function fileSelectHandlerProfile(title, defalutProfile) { var oFile; oFile = $('#thumbUploadProfile')[0].files[0]; var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i; if (!rFilter.test(oFile.type)) { $('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show(); } }

i want to check the oFile width and height, how can it is possible like oFile.type?

Answer1:

A solutions is to load it clienside and check the height and width.

function fileSelectHandlerProfile(title, defalutProfile) { var oFile; oFile = $('#thumbUploadProfile')[0].files[0]; var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i; if (!rFilter.test(oFile.type)) { $('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show(); } var picReader = new FileReader(); picReader.addEventListener("load", function (event) { var imageObj = new Image(); imageObj.src = event.target.result; imageObj.onload = function () { //TEST IMAGE SIZE if (imageObj.height < 100 || imageObj.width < 100) { $('.errorProfile').html('Please select an image with correct dimensions').show(); } }; }); //Read the image picReader.readAsDataURL(oFile);

}

Answer2:

The <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader" rel="nofollow">FileReader API</a> allows you to use FileReader.readAsDataURL to read the file as a data: url. Use that url as the src attribute of a <img /> tag and read the width and height attribute of that image.

Answer3:

var width; var height; var oFile; oFile = $('#thumbUploadProfile')[0].files[0]; var reader = new FileReader(); reader.onload = function(e){ var image = new Image(); image.onload = function(){ width = img.width; height = img.height; } image.src = e.target.result; }; reader.readAsDataURL(oFile);

Answer4:

You can do it in 2 steps:

<ol><li>Read the image file content as data url using html5 file api:</li> </ol><pre class="lang-js prettyprint-override">var reader = new FileReader(); reader.onloadend = function () { //var dataUrl = reader.result; //code as per step 2 here... } reader.readAsDataURL(oFile); //ref: https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL <ol start="2"><li>

Now read the image size by creating Image object with the dataUrl as src.

Details: <a href="https://stackoverflow.com/questions/17774928/js-get-image-width-and-height-from-the-base64-code/17775293#17775293" rel="nofollow">JS - get image width and height from the base64 code</a>

</li> </ol>

Recommend

  • Unable to show an image using python PIL Image.show
  • How to display Bitmap Image in image control on WPF using C#
  • Displaying a Bitmap on Canvas in Surfaceview
  • https in htaccess and order of rules (using Expression Engine)
  • How to get a table cell value using jQuery
  • How to set download location via chrome api
  • PHP file_exists() anomaly
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Matplotlib save file as JPEG encoder error
  • Read the values from XML file
  • c# winform DrawToBitmap offscreen
  • MVVM: Image Bind Source from FileOpenPicker
  • Python ImageIO Gif Set Delay Between Frames
  • Floated image with variable width and heading with background image
  • Can't delete or rename original file after resizing
  • How to have background script and something similar to a default popup?
  • How to render a blob on a canvas element?
  • Abort upload large uploads after reading headers
  • Python urlparse: small issue
  • Syntax for setting draggablecursor property in google maps api
  • How to delay loading a property with linq to sql external mapping?
  • Ajax Loaded meta Tags
  • Nant, Vault & Windows Integrated Authentication
  • HTML download movie download link
  • swift auto completion not working in Xcode6-Beta
  • Resize panoramic image to fixed size
  • Does CUDA 5 support STL or THRUST inside the device code?
  • htaccess rewriting URLs with multiple forward slashes
  • To display the title for the current loaction in map in iphone
  • GridView Sorting works once only
  • SVN: Merging two branches together
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How do I rollback to a specific git commit
  • Is there a mandatory requirement to switch app.yaml?
  • How to delete a row from a dynamic generate table using jquery?
  • trying to dynamically update Highchart column chart but series undefined
  • using HTMLImports.whenReady not working in chrome
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Busy indicator not showing up in wpf window [duplicate]