Validate (Check) dimensions (Height and Width) of Image before Upload using HTML5, JavaScript and jQ
来源:互联网 发布:大大网络用语什么意思 编辑:程序博客网 时间:2024/05/16 10:17
Validate (Check) dimensions (Height and Width) of Image before Upload using HTML5, JavaScript and jQuery
Here Mudassar Ahmed Khan has explained how to get and then validate (check) dimensions (Height and Width) of Image file before upload using HTML5, JavaScript and jQuery.
HTML5 allows developers to access the file details such as Height and Width using JavaScript and jQuery.
Don't forget to download Aspose as well: http://aspose.com/file-tools
In this article I will explain how to get and then validate (check) dimensions (Height and Width) of Image file before upload using HTML5, JavaScript and jQuery.
HTML5 allows developers to access the file details such as Height and Width using JavaScript and jQuery.
Validate (Check) dimensions (Height and Width) of Image before Upload using JavaScript
The following HTML markup consists of an HTML FileUpload and a Button. When the button is clicked, a function named Upload is executed.
Inside this function, few checks are performed such as whether the File is a valid Image file and the browser supports HTML5 File API.
Then using the HTML5 FileReader API, the Image File is read as Base64 string and then is assigned as source to a JavaScript Image object.
Finally inside the onload event handler of the JavaScript Image object, the dimensions i.e. Height and Width of the selected Image file is determined.
<input type="file" id="fileUpload" />
<input type="button" value="Upload" onclick="return Upload()" />
<script type="text/javascript">
function Upload() {
//Get reference of FileUpload.
var fileUpload = document.getElementById("fileUpload");
//Check whether the file is valid Image.
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
if (regex.test(fileUpload.value.toLowerCase())) {
//Check whether HTML5 is supported.
if (typeof (fileUpload.files) != "undefined") {
//Initiate the FileReader object.
var reader = new FileReader();
//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {
//Initiate the JavaScript Image object.
var image = new Image();
//Set the Base64 string return from FileReader as source.
image.src = e.target.result;
//Validate the File Height and Width.
image.onload = function () {
var height = this.height;
var width = this.width;
if (height > 100 || width > 100) {
alert("Height and Width must not exceed 100px.");
return false;
}
alert("Uploaded image has valid Height and Width.");
return true;
};
}
} else {
alert("This browser does not support HTML5.");
return false;
}
} else {
alert("Please select a valid Image file.");
return false;
}
}
</script>
Validate (Check) dimensions (Height and Width) of Image before Upload using jQuery
The following HTML markup consists of an HTML FileUpload and a Button. When the button is clicked, a jQuery click event handler is executed.
Inside the jQuery click event handler, few checks are performed such as whether the File is a valid Image file and the browser supports HTML5 File API.
Then using the HTML5 FileReader API, the Image File is read as Base64 string and then is assigned as source to a JavaScript Image object.
Finally inside the onload event handler of the JavaScript Image object, the dimensions i.e. Height and Width of the selected Image file is determined.
<input type="file" id="fileUpload" />
<input id="upload" type="button" value="Upload" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#upload").bind("click", function () {
//Get reference of FileUpload.
var fileUpload = $("#fileUpload")[0];
//Check whether the file is valid Image.
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
if (regex.test(fileUpload.value.toLowerCase())) {
//Check whether HTML5 is supported.
if (typeof (fileUpload.files) != "undefined") {
//Initiate the FileReader object.
var reader = new FileReader();
//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {
//Initiate the JavaScript Image object.
var image = new Image();
//Set the Base64 string return from FileReader as source.
image.src = e.target.result;
image.onload = function () {
//Determine the Height and Width.
var height = this.height;
var width = this.width;
if (height > 100 || width > 100) {
alert("Height and Width must not exceed 100px.");
return false;
}
alert("Uploaded image has valid Height and Width.");
return true;
};
}
} else {
alert("This browser does not support HTML5.");
return false;
}
} else {
alert("Please select a valid Image file.");
return false;
}
});
});
</script>
0 0
- Validate (Check) dimensions (Height and Width) of Image before Upload using HTML5, JavaScript and jQ
- Check (Validate) File (Image) Size before upload using JavaScript and jQuery
- Calculate height and width of GIF/JPG files
- About the Height and Width property of DisplayObject
- Set Height and Width Pie Chart
- studyjams notes 1B--width and height
- 得到屏幕的Width And Height
- web-屏幕、浏览器、页面-width and height
- yuv420sp crop from any startpoint and width and height
- drupal7 change value before validate and submit
- Upload and Download File using Java
- Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV
- Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV
- Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV
- Recording MP3 Using Only HTML5 and JavaScript (Recordmp3.js)
- Android get layout height and width in a fragment
- CCLabelTTF with fixed width and dynamic height solution
- do you have "has ambiguous scrollable content width and height"
- 自定义ViewGroup--CascadeLayout
- vba脚本excel动态创建索引目录表
- 第1章第2节练习题3 删除最小值结点
- 并发程序的乱序之一:编译器指令重排
- DFS基础题-----HDOJ1241
- Validate (Check) dimensions (Height and Width) of Image before Upload using HTML5, JavaScript and jQ
- python + eric 安装
- Shiro权限验证标签
- Qt5.5.0 vs2013 64位编译
- ZOJ 2095 Divisor Summation (求因子和)
- mysql 多条件联表
- iOS多线程(GCD重点介绍)
- pomelo下memcached的安装以及使用(二)
- 机器学习(一)