日期:2012-8-30 来源:GBin1.com
今天推荐一款来自俄国web开发人员的支持拖放的跨浏览器javascript文件上传类库:FileDrop。
主要特性
- 跨浏览器
- 独立并且体积非常小
- 支持不同的callback
- 使用iframe作为fallback
- 多文件选择
- 支持多个FileDrop实例
- 文档比较全
如何使用
最少的代码如下:
<!DOCTYPE html> <html> <head> <title>Basic FileDrop example</title> <script type="text/javascript" src="http://proger.i-forge.net/filedrop-min.js"></script> <style type="text/css"> /* Essential FileDrop element configuration: */ .fd-zone { position: relative; overflow: hidden; 15em; text-align: center; } /* Hides <input type="file" /> while simulating "Browse" button: */ .fd-file { opacity: 0; font-size: 118px; position: absolute; right: 0; top: 0; z-index: 1; padding: 0; margin: 0; cursor: pointer; filter: alpha(opacity=0); font-family: sans-serif; } /* Provides visible feedback when use drags a file over the drop zone: */ .fd-zone.over { border-color: maroon; } </style> </head> <body> <!-- A FileDrop area. Can contain any text or elements, or be empty. Can be of any HTML tag too, not necessary fieldset. --> <fieldset id="zone"> <legend>Drop a file inside…</legend> <p>Or click here to <em>Browse</em>..</p> </fieldset> <script type="text/javascript"> // Tell FileDrop we can deal with iframe uploads using this URL: var options = {iframe: {url: 'your-upload-script.php'}}; // Attach FileDrop to an area: var zone = new FileDrop('zone', options); // Do something when a user chooses or drops a file: zone.on.send.push(function (files) { // if browser supports files[] will contain multiple items. for (var i = 0; i < files.length; i++) { files[i].SendTo('your-upload-script.php'); } }); </script> </body> </html>
....