【简报】超棒的拖放式文件下传javascript类库：FileDrop
【简报】超棒的拖放式文件上传javascript类库：FileDrop日期：2012-8-30来源：GBin1.com今天推荐一款来自俄国we
【简报】超棒的拖放式文件上传javascript类库：FileDrop
日期：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; width: 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> ......
来源：【简报】超棒的拖放式文件上传javascript类库：FileDrop
