What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
It is a light JavaScript library. Work of jQuery is to make use Javascript in easy way to develop. jQuery wraps lots of function and method to call them with a single line and to reduce to lines of JavaScript. It also simplifies complicated things from JavaScript like AJAX calls and DOM manipulation.
There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
There are two ways to use jQuery.
Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).
J-Query-File-Upload plugin allow user to select multiple files, display information about them, and provide previews for images.
Example:
Script References
JQuery-File-Upload front-end code is spread across four external JS files, two of which are not included in the download package and are hosted on the googleapis.com site. Here is what is contained in each:
Minimal code
The plugin is instantiated when you call fileupload() from a JQuery file upload widget. By building our own UI, as we have done here, we can use the basic plugin version with only a few options. At a minimum, you need to and pass it a options object that contains the server component url, some files, and perhaps a function to run once the upload has completed. To convert any HTML element into a j Query widget, call it with any j Query DOM function that returns a JQuery widget. The $('#elementid') function is usually the simplest. Here's a very simple call to fileupload() which adds the uploaded file's name to the document once it's done:
And yes, we didn't even code an onchange event handler for the file input element!
Other interesting things?
jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery −
jQuery is a lightweight, "write less, do more", JavaScript library.
It is a light JavaScript library. Work of jQuery is to make use Javascript in easy way to develop. jQuery wraps lots of function and method to call them with a single line and to reduce to lines of JavaScript. It also simplifies complicated things from JavaScript like AJAX calls and DOM manipulation.
- The jQuery library contains the following features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
- Many of the biggest companies on the Web use jQuery, such as:
- Microsoft
- IBM
- Netflix
There are two ways to use jQuery.
Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
<script type = "text/javascript" src = "Directory Name/libs/jquery/2.1.3/jquery.min.js"></script>
|
<script type = "text/javascript" src = "http://ajax.googleapis.com/
ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
J-Query-File-Upload plugin allow user to select multiple files, display information about them, and provide previews for images.
Example:
<!DOCTYPE
html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="stylesheet"
type="text/css" href="style/default.css"
media="screen" />
<title>JavaScript File API and
Ajax uploading Demo</title>
</head>
<body>
<div
id="wrap">
<h1>JavaScript
File API and Ajax uploading Demo</h1>
<h2>Choose a file to
upload:</h2>
<input
id="file_upload" type="file" name="files[]"
/>
<div id="files">
<h2>File
Preview</h2>
<ul id="filePreview"></ul>
<a
id="remove" href="#" title="Remove
file">Remove file</a>
</div>
</div>
</body>
</html>
|
Script References
JQuery-File-Upload front-end code is spread across four external JS files, two of which are not included in the download package and are hosted on the googleapis.com site. Here is what is contained in each:
- J-Query.min.js: The hosted minified j Query library.
- J-Query-ui.min.js: A hosted extention of the basic fileupload widget. It also adds a complete user interface based on j Query templates.
- J-Query.fileupload.js: The basic j Query-File-Upload plugin, used to enhance the file upload process.
- J-Query.iframe-transport.js: Adds iframe transport support to j Query.ajax() for browsers that don't support the File API.
<html>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/j Query/1.6.4/j
Query.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/j Queryui/1.8.16/j
Query-ui.min.js"></script>
<script src="js/j
Query.fileupload.js"></script>
<script src="js/j
Query.iframe-transport.js"></script>
<script
src="js/json_parse.js"></script>
<script src="js/upload.js"></script>
</head>
</html>
|
Minimal code
The plugin is instantiated when you call fileupload() from a JQuery file upload widget. By building our own UI, as we have done here, we can use the basic plugin version with only a few options. At a minimum, you need to and pass it a options object that contains the server component url, some files, and perhaps a function to run once the upload has completed. To convert any HTML element into a j Query widget, call it with any j Query DOM function that returns a JQuery widget. The $('#elementid') function is usually the simplest. Here's a very simple call to fileupload() which adds the uploaded file's name to the document once it's done:
$('#file_upload').fileupload
({
url: 'php/index.php',
done: function (e, data)
{
$.each(data.result, function (index,
file))
{
$('<p/>').text(file.name).appendTo('body');
};
}
});
|
And yes, we didn't even code an onchange event handler for the file input element!
Other interesting things?
jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery −
- 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.
- Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
- AJAX Support − The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
- Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.
- Lightweight − The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
- Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
No comments:
Post a Comment