How to check a image dimension and image format using JavaScript before uploading the image?

Question

I am a beginner in making a web page using HTML, JavaScript, and PHP. I am now working on a web page for the user to upload an image with a specific dimension and extension because of my code was written before and can be used only in particular requirements.

The code for uploading the image is as follows:

<form name="images" method="POST" action="send.php">
<label>Some text</label>
<input type="text" name="someText"/>
<label>The image: </label>
<input id="img" type="file" name="imageUpload" accept=".jpg"/><br/>
<input type="submit" value="submit"/>
</form>

I have search through the Internet and tried a number of solutions provided, but I could not solve the problem. Are there any other ways to deal with the problem. Thank you very much!

The solution I have tried: http://blog.xuite.net/mark.wu/x/49421803-上傳檔案前，JavaScript檢查檔案格式、大小+ https://zhidao.baidu.com/question/488777030449774252.html

Please mention what you have tried so far in your question because your problem is a common case that should have plenty working solutions on internet — Pratansyah, Nov 28 '17 at 05:25
As I would like to make the web page much user-friendly, it's better to work on any browsers — know nothing about programming, Nov 28 '17 at 05:47

Nisal Edu · Accepted Answer · 2017-11-28T06:02:50.347

0

Try following code

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

$("#img").change(function(e) {
  var file, img;
  if ((file = this.files[0])) {
    img = new Image();
    img.onload = function() {
      console.log("width : " + this.width + " height : " + this.height);
    };
    img.src = _URL.createObjectURL(file);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="img" type="file" name="imageUpload" /><br/>

edited Nov 28 '17 at 06:02

answered Nov 28 '17 at 05:33

Nisal Edu

7,237
4
28
34

Thank you for your reply. But I mean I need to get the image width and height, not the file size. So sorry about that. – know nothing about programming Nov 28 '17 at 05:43
Try now I have edited my answer I have have use jquery thinks that is okay with you – Nisal Edu Nov 28 '17 at 06:05

How to check a image dimension and image format using JavaScript before uploading the image?

1 Answers1