background preloader

HTML5 File Upload with jQuery***

HTML5 File Upload with jQuery***
Martin Angelov Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers. The photos will have a preview and a progress bar, all of which controlled on the client side. What are HTML5 File Uploads? Uploading files using HTML5 is actually a combination of three technologies – the new File Reader API, the also new Drag & Drop API, and the good ol’ AJAX (with the addition of binary data transfer). The user drops one or more files from their file system to the browser window by dragging. Sounds complicated? Currently file uploads work only in Firefox and Chrome, but upcoming major versions of the other browsers also include support for it. So lets get started! The HTML The markup of our Upload Center couldn’t be simpler. index.html <! The only div that the Filedrop interacts with, is #dropbox. The PHP Code Related:  HTML5

HTML5 File Drag & Drop Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration. This is the first in a four-part series of posts which describes how to: enable file dragging and dropping onto a web page elementanalyze dropped files in JavaScriptload and parse files on the clientasynchronously upload files to the server using XMLHttpRequest2show a graphical progress bar while the upload occursuse progressive enhancement to ensure your file upload form works in any browser (good news for all you IE6 fans!)code it in plain ol’ JavaScript without a library. Phew. Big, Bad Browser Support Before we begin, this tutorial refers to several cutting-edge HTML5 techniques so expect support to be patchy. Finally, note that my code shows the fundamental concepts. The HTML and CSS Here’s our standard form with a file input type. We’ll be uploading files to a server running PHP but the code is much the same no matter what technology you’re using. The File API

Redactor WYSIWYG html editor by James Fenimore Cooper Winding its way among countless islands, and imbedded in mountains, the "holy lake" extended a dozen leagues still further to the south. With the high plain that there interposed itself to the further passage of the water, commenced a portage of as many miles, which conducted the adventurer to the banks of the Hudson, at a point where, with the usual obstructions of the rapids, or rifts, as they were then termed in the language of the country, the river became navigable to the tide.​ "Come," he said, with a good-humored smile; "the buck that will take to the water must be headed, and not followed." The route taken by Hawkeye lay across those sandy plains, relived by occasional valleys and swells of land, which had been traversed by their party on the morning of the same day, with the baffled Magua for their guide.

jQuery UI 20 of Best jQuery And CSS3 Tutorials Hello, welcome back again after this long absence. A lot of things happened this days like the new logo for HTML5 really in my opinion, is not great for this reduction. Whatever, I back with useful and good tutorials one of them talking about jQuery and CSS3. I put between your hands a big and best collection of jQuery and CSS3 tutorials . Let’s stop talking and start. Create an Audio Player in HTML5 & CSS3 jSlickmenu: A jQuery plugin for slick CSS3 menus The plugin called jSlickmenu, creates, well, slick menus with jQuery. A fancy Apple.com-style search suggestion in this tutorial you can make a search bar like the search bar in Apple website … it’s really helpful advantage for your site .. CSS3 Animated Bubble Buttons: With this tutorial, you can easily turn any link on your page into an animated button by just assigning a class name. Create CSS3 Pricing Tables Create Depth And Nice 3D Ribbons Only Using CSS3 CSS3 Navigation Menu with Notification Badges Apple Navigation with CSS3 Slide Thumbs

Jeditable - Edit In Place Plugin For jQuery Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul’s editable. For those in hurry download latest source or minified. For bleeding edge version check GitHub. How does in place editing work? Normal flow is this. Basic usage While reading you might also want to check live demo. <div class="edit" id="div_1">Dolor</div><div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. There is only one mandatory parameter. Code above does several things: Elements with class edit become editable. Not bad for oneliner, huh? Elements with class edit_area will use textarea as input. These two examples cover most of needs you usually have. What is sent to server? When submitting change following data will be POST:ed to server: But wait! Demo

Deploying JavaScript Applications - Alex Sexton Preface: Nothing in this post is necessarily new, or even anything I thought of first (save for a name or two). However, I’m writing it because I’d like to start building some consistency and naming conventions around a few of the techniques that I am using (and are becoming more common), as well as document some processes that I find helpful. Much of this comes from my experience deploying applications at Bazaarvoice as a large third party vendor, and should probably be tailored to your specific environment. I’m sure someone does the opposite of me in each step of this with good results. Also, I fully understand the irony of loading a few MBs of GIFs in a post largely about performance, but I like them. Any specific tools I mention are because I’m familiar with them, not necessarily because there are no good alternatives. You You work on a large app. Dev with builds in mind Loading what you need is better than byte shaving Don’t penalize modern users One less jpeg Requests matter CSS Files

TagCanvas - an HTML5 Canvas Tag Cloud Skip to: TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud. I'm releasing it as open source under the LGPL v3 license. Below is an example. Since the canvas is part of the HTML page, you can position things above or below it. Cloud shape: You clicked on: …nothing yet! For the example above, I've replaced all the links with onclick handlers so that you won't end up on a different page when you click on any of the tags. TagCanvas in Internet Explorer The canvas element is not supported by Internet Explorer versions up to and including version 8. At the time of writing you must use the latest trunk version of ExplorerCanvas, as the current version in the project downloads area does not have the required text output support. Note again: the fading of image tags with distance does not work with the current version of Explorer Canvas. Internet Explorer 9 does support the canvas element, so excanvas.js is not required. Images Accelerometer / motion sensor Help!

Ajax Image Upload without Refreshing Page using Jquery. Are you looking for ajax file/image upload and preview without refreshing page using Jquery. I had implemented this ajax form submitting using jquery.form plugin and used Arun Shekar's image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos. Download Script Live Demo Javascript Code$("#photoimg").live('change',function(){})- photoimg is the ID name of INPUT FILE tag and $('#imageform').ajaxForm() - imageform is the ID name of FORM. index.php Contains simple PHP and HTML code. <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> Upload image <input type="file" name="photoimg" id="photoimg" /></form> Sample database design for Users. Users Contains user details username, password, email, profile_image and profile_image_small etc. ajaximage.php Contains PHP code. <? db.php Database configuration file, modify username, password, database and base url values.

Using Web Workers to Speed-Up Your JavaScript Applications The performance of JavaScript applications running in the browser has increased considerably over the past few years. This is mainly due to continued work on the underlying JavaScript engines (such as V8) that actually execute the code. But as these JavaScript engines get faster, our web applications also demand more. The introduction of JavaScript APIs like the File API has made it possible to write JavaScript applications that are undertaking some serious computational tasks on the client-side. In this blog post you are going to learn how to build multi-thread JavaScript applications using Web Workers. An Introduction to Web Workers and Threads The JavaScript code that you write will usually execute in a single thread. Web Workers provide a facility for creating new threads for executing your JavaScript code in. Check out this demo for an example of the performance impact that using workers can have. Spawning a Worker Creating Web Workers is a fairly simple task. worker.postMessage();

12 Most Popular jQuery Plugins of April 2012 Here we are again for another monthly round-up of the most popular jQuery plugins of April 2012, these 12 plugins will make you WOW! 1. HoverDir Create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse. 2. Lake.js takes an image element and inserts a canvas element displaying the image and its flipped reflection directly after the image element. 3. Create thumbnails easily from high-res images, without any distortion, with one line of code. 4. Keep an eye on how far down the page a user has scrolled and then reports data back to Google Analytics using the GA Events API. 5. Simple HTML5 page edits. 6. Pivot.js is a simple way to summarize large data sets on the fly. 7. Algorithmic sunburst generator via CSS and canvas. 8. A plugin that casts photorealistic shadows. 9. MiniJs provides a suite of simple and consistent jQuery plugins including image slider, tooltip and notification. 10. 11. 12.

Ajax Upload - ZURB Playground - ZURB.com You're going to need jQuery and the AJAX Upload jQuery plugin. Link them up, make sure jQuery is loaded first. Here is the JavaScript we're going to add in its entirety. Now let's break it down. First we attach the the AjaxUpload behavior to our file form element. new AjaxUpload('imageUpload', { Next we specify where we want to post the AJAX upload to. action: $('form#newHotnessForm').attr('action'), Set the name of the file form element that will be posted to your server. Add a class to your preview div to indicate that the image is uploading. onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, When the image has been uploaded we need to do two things. We avoid this problem by waiting to remove the loading class until after the preview image's load event fires. onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); Lastly we set the source of preview image to the thumbnail our server just created.

Announcing the jQuery Plugin Registry They say good things come to those who wait, and today we’re happy to end the waiting and unveil the jQuery Plugin Registry. We’ve worked long and hard to put together a brand new site that will serve to reduce the fragmentation and distribution problems that can be obstacles for plugin developers and consumers. We’ve also put an emphasis on remedying a number of the issues that plagued the old jQuery plugins site, especially with respect to workflows for contribution of both plugins and enhancements to the repository itself. The goal is to make sharing and browsing quality jQuery plugins a pleasant experience for everyone! jQuery Plugin Registry: plugins.jquery.comSource/Documentation/Issues: github.com/jquery/plugins.jquery.com Downloading and Using Plugins If you’re looking to just browse and use jQuery plugins in your application or site, not a lot has changed. Registering Your Plugin Users can download your plugin however you’d like them to. Contributing to the Plugin Registry

Related: