20款JQuery文件上传插件及示例
Check File Size Before Form Submit with Html5 & jQuery
Checking the file size before submitting the form has always been like a forbidden fruit to us, that’s because there was no easy way to access clients’ file system, which can return the exact size of a file before sending it to the server. Old browsers have no inbuilt capability, and Javascript won’t do it, so normally people would use flash to calculate the file size in HTML upload forms, and most of us just preferred to skip the client part, letting server handle the problem.
But in recent years, the HTML5 is doing wonders for the web browsers. It comes with many features, including the client-side file objects manipulation (File API). Which means we can now throwaway the old methods, and adopt to this new system, which not only returns file properties, but it opens a whole new set of possibilities.
Mini AJAX File Upload Form with jQuery
In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface.
DROPAREA : jQuery Html5 drag-drop file uploader plugin
droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).
Originally it has:
- client-side image resizing with canvas on browser option
- data url option for sending a file/image as a text field with ajax
- click event for browsing files
Dropzone.js : jQuery drag’n'drop File Upload library
Dropzone.js is a light weight JavaScript library for jQuery that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.
Features:
-
Image thumbnail previews. Simply register the callback
thumbnail(file, data)and display the image wherever you like - Multiple files and synchronous uploads
- Progress updates
- Support for large files
Dropbox File Uploader With Twitter Bootstrap
A few weeks ago, Dropbox introduced a neat new feature – the Dropbox Chooser. By embedding it into your website, you give users a button with which they can attach files from their online storage.
Today we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.
FileDrop : Cross-browser JavaScript Drag & Drop file upload
FileDrop is a lightweight JavaScript class for easy-to-use file uploading that works out of the box.Self-contained cross-browser pure JavaScript class for Drag & Drop and AJAX (multi) file upload.
Features:
- Cross-browser – supports Firefox 3.6, Internet Explorer 6, Google Chrome 7, SRWare Iron 4, Apple Safari 5 and Opera 11.61.
- Self-contained & tiny – just 470 lines of code; 8 KiB when minified,3.5 KiB when gzipped.
- Various callbacks – on progress, on done, on error and on many other events.
- Graceful degradation using IFrame fallback.
- Multiple file selection.
- Any number of independent FileDrops.
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery
Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user.
Create an Upload Form using jQuery, CSS3, HTML5 and PHP
In this tutorial we will code an Upload Form from Impressionist UI. We will code it using the Plupload API. Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads. This way we are able to create a very powerful upload form compatible with all browsers. So let’s get started
elFinder : jQuery File manager for web
elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. Creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.
Features:
- All operations with files and folders on a remote server (copy, move, upload, create folder/file, rename, etc.)
- High performance server beckend and light client UI
- Local file system, MySQL, FTP volume storage drivers
- Background file upload with Drag & Drop HTML5 support
- Standard methods of file/group selection using mouse or keyboard
- Move/Copy files with Drag & Drop
- Archives create/extract (zip, rar, 7z, tar, gzip, bzip2)
- Quicklook, preview for common file types
- “Places” for your favorites
- Calculate directory sizes
- Thumbnails for image files
- Easy to integrate with web editors (elRTE, CKEditor, TinyMCE)
- Flexible configuration of access rights, upload file types, user interface and other
- Simple client-server API based on JSON
Plupload : A jQuery tool for uploading files using Flash, Silverlight, Google Gears, HTML5 or Browserplus
Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such asupload progress, image resizing and chunked uploads.
The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.
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 image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos.
SFBrowser File Manager With PHP & jQuery
SFBrowser is an open source application, built with PHP and jQuery, formanaging files online with an Ajaxed interface.
Besides listing files and folders, it can upload, delete, rename and preview them. Uploading can be accomplished via an Ajaxed or Flash-based uploader (queued multiple uploads, progress bar, canceling, selection filtering, size filtering).
The functionality can be extended with plugins. There are few ready-to-use ones like filetree and image-resize.
Image Upload and Cropping with PHP and Jquery
Image cropping is the most important and required part in social media projects. In this post my friend had implemented image cropping functionalities such as upload image file into physical location, cropping image using jquery and resizing image into small resolution.
Zurb jQuery Ajax Upload
We ditch the upload button in favor of a save button and fire the AJAX upload event as soon as a file is selected. The image is processed server side and a thumbnail is loaded onto the existing page. Dosen’t that feel so much better?
We now have a visual representation (imagine that) of the image we selected. This is particularly useful in larger forms when many fields will be submitted with a single action. It allows the user to review the form before pressing save and see what image (or images) they selected.
jQuery File Upload Plugin With Drag ‘n’ Drop Support
jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads.
The plugin is based on open standards like HTML5-JavaScript and doesn’t use Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.
版权所有: 本文系米扑博客原创、转载、摘录，或修订后发表，最后更新于 2014-05-15 02:00:23
侵权处理: 本个人博客，不盈利，若侵犯了您的作品权，请联系博主删除，莫恶意，索钱财，感谢！