image upload and show in jquery using readAsText()
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>Image upload in folder using ajax</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
<script>
// $(".errorMsg").alert('close');
$(".errorMsg").slideUp(2000);
</script>
<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="https://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 readAsText() 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' onchange='openFile(event)'><br>
</div>
<textarea rows="25" class="form-control" placeholder="Address" name="out" id="out" tabindex="30"></textarea>
</div>
</div>
</div>
</br>
<?php include('footer.php'); ?>
<script>
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var text = reader.result;
$("#out").val(reader.result.substring(0, 600000));
// console.log(reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
};
</script>
above example jquery filereader() function read browse data and browse data read in data url using readAsText() function.
file read as string and string value show in textarea,I hope that you can understand example and if my blog you would be like please comment and share.
thanks
Comments