Drag and Drop File Uploader
If you are feeling bored using same kind of html uploader, this article would help you much. Here we are using drag and drop option. Almost every browser is now has support for drag and drop upload system. Some web sites are using this for most upgraded UI. Here is a sample code for instance.
The HTML is as simple as basic uploader. But you have to add an ‘enctype’ attribute with ‘multipart/form-data’ value for multipart uploading. Everything else is simple.
HTML:
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”>
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>File Uploader</title> </head> <body> <form method=”post” action=”upload.php” enctype=”multipart/form-data” id=”uploadForm”> <div> <div > <label for=”file”>File: </label> <input type=”file” id=”file” name=”file[]” multiple><br> </div>
<div > <input type=”submit” name=”upload” value=”Upload”> </div> </div> </form> </body> </html> |
To make some style in ‘drop zone’ and ‘progress bar’ using CSS is a plus point. Here are the classes.
CSS:
| @charset “utf-8″;/* CSS Document */
.droppable { border: #ccc 1px solid; border-radius: 8px; background: #eee; color: #666; padding: 20px; margin: 10px; clear: both; text-align: center; }
.droppable.hover { background: #ddd; }
.uploadList { margin: 0; padding: 0; list-style: none; }
.uploadItem { overflow: hidden; border-bottom: #BCBCBC 1px solid; margin: 0 20px; padding: 3px; }
.uploadItem span { overflow: hidden; width: 150px; float: left; display: block; }
a.addInputRow, a.delInputRow, .uploadItem a { display: inline-block; background: url(add.png) no-repeat; height: 16px; width: 16px; text-indent: -999px; }
.uploadItem a { float: left; display: block; padding-left: 20px; background-image: url(delete.png); }
a.delInputRow { background-image: url(delete.png); }
.progress { margin: 5px 0; height: 15px; border-radius: 3px; background: #545A74; } |
There are three JavaScript classes declared for uploading.
- Form.Upload: Class for detecting browser compatibility and file types.
- Form.MultiFileInput: Class for managing files to be uploaded.
- Request.File: Class for uploading files and manage progress bar.
JavaScript:
| // JavaScript Documentvar input, list, drop;
var inputFiles = new Form.MultipleFileInput(input, list, drop, { onDragenter: drop.addClass.pass(‘hover’, drop), onDragleave: drop.removeClass.pass(‘hover’, drop), onDrop: drop.removeClass.pass(‘hover’, drop) });
var request = new Request.File({ url: ‘files.php’ });
myForm.addEvent(‘submit’, function(event){ event.preventDefault(); inputFiles.getFiles().each(function(file){ request.append(‘url[]‘ , file); }); request.send(); }); |
You can customize uploading bar by appending Form.MultipartUpload and Request.File classes.
| // JavaScript Documentwindow.addEvent(‘domready’, function(){
var upload = new Form.Upload(‘file’, { dropMsg: “Drag and Drop files here”, onComplete: function(){ alert(‘Files uploaded!’); } });
if (!upload.isModern()) { new iFrameFormRequest(‘uploadForm’, { onComplete: function(response){ alert(‘Files uploaded!’); } }); }
}); |
This script changes progress bar glossy.
Related posts:
No Comments
No comments yet.
RSS feed for comments on this post.
Sorry, the comment form is closed at this time.
