What is jQuery :
JQuery is a JavaScript library which is small, quick, with tons of features that makes things such as animation, event handling and manipulation in web browser easy to use and handle.
1-jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto -
2-Write less, do more.
3-jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
Following feature of jQuery :
1-DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
2-Event Handling : The jQuery offers an elegant way to capture a wide variety of events,such as click,over event,
3-Ajax Support :
jQuery support ajax technology,
4-Lightweight :he jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
5-Animations − The jQuery comes with plenty of built-in animation effects.
Here this article explains how to preview an image before uploading on the server side in jQuery.
So using HTML 5 FileReader() we can able to preview the image before upload it in jQuery.
By this user can view thumbnail photos on the client side .i.e and select or choose the photo which he/she wants to get upload.
Demo link :
Code link :
Html
onchange event :
1-The
onchange event occurs when the value of an element has been changed.
2-onchange
event occures when state has been changed.
Syntax
:
onchange="myFunction()"
Onchange
event support in following html tags :
<input
type="checkbox">, <input type="file">,
<input type="password">, <input type="radio">,
<input type="range">, <input type="search">,
<input type="text">, <keygen>, <select>
and <textarea>
FileReader()
The
FileReader object lets web applications asynchronously read the
contents of files ( or raw data buffers ) stored on the user’s
computer, using File or Blob objects to specify the file or data to
read, which means that your program will not stall while a file is
being read. This is particularly useful when dealing with large
files.
File
objects may be obtained from a FileList object returned as a result
of a user selecting files using the <input> element, from a
drag and drop operation’s DataTransfer object, or from the
mozGetAsFile() API on an HTMLCanvasElement.
Syntax
:
var
myReader = new FileReader();
FileReader
includes 4 options for reading a file:
1-FileReader.readAsBinaryString(Blob|File)
: The result property will contain the file/blob’s data as a binary
string. Every byte is represented by an integer in the range.
2-FileReader.readAsText(Blob|File,
opt_encoding) : The result property will contain the file/blob’s
data as a text string. By default, the string is decoded as ‘UTF-8’.
Use the optional encoding parameter can specify a different format.
3-FileReader.readAsDataURL(Blob|File)
: The result property will contain the file/blob’s data encoded
as a data URL.
4-FileReader.readAsArrayBuffer(Blob|File)
: The result property will contain the file/blob’s data as an
ArrayBuffer object.
Simple
file read exmple as below , all file content read using file read
funtion and this function create object using object perform another
operation.
Make
file structure as below :
1-header.php,
2-footer.php,
3-index.php
1-header.php
:
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Using jQuery image browse and show in image tag</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!--
start:header -->
<nav
class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Free
Teachnology</a>
</div>
<!-- Collect the nav links, forms, and other content for
toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home
<span class="sr-only"></span></a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</br></br></br>
<!--
end:header -->
bootstrap
link css and js include ,
2-footer.php
<link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet">
<!--
Start::footer -->
<footer>
<div class="footer footer-bottom">
<div class="container">
<div class="text-muted ">
<a href="http://freeteachnology.blogspot.in/"
>Free Teachnology</a>
</div>
<p class="pull-left"> Copyright © <?php
echo date('Y');?>. Design and Develop by - Disuza Jen. </p>
<div class="pull-right">
<ul class="nav nav-pills payments">
<li><i class="fa
fa-facebook"></i></li>
<li><i class="fa
fa-google"></i></li>
<li><i class="fa
fa-twitter"></i></li>
<li><i class="fa fa-link"></i></li>
</ul>
</div>
</div>
</div>
<!--/.footer-bottom-->
</footer>
<!--
End::footer -->
<style
type="text/css">
.footer-bottom {
margin-top:220px;
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom
p.pull-left {
padding-top: 6px;
}
</style>
</body>
</html>
3-index.php
:
<?php
include('header.php'); ?>
<body>
<br><br><br>
<div
class="cleafix"></div>
<div
class="container">
<div
class="alert alert-info">
<strong>Hi..</strong> >Using jQuery image browse
and show in image tag.
</div>
<div class="alert alert-warning">
<a
href="https://drive.google.com/open?id=0BxmTZPVcu72fNDFpZk1UaDJUUG8"
class="btn btn-xs btn-warning pull-right"
target="blank();">Click</a>
<strong> Code download link-</strong>
</div>
<div
class="container-fluid well span3 ">
<div
class="row">
<div class="col-lg-3 parentClass">
<h6>Browse image</h6>
<input type="file" accept="image/*"
onchange="loadFile(event)">
</div>
<img id="output" height="300px"
width="300px" />
</div>
</div>
</div>
</br>
<?php
include('footer.php'); ?>
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
above
example jquery filereader() function read browse data and browse data
read in data url using readAsDataURL() function.
I
hope that you can understand example and if my blog you would be like
please comment and share.
thanks
Comments