日期：2012-8-30  来源：GBin1.com

今天推荐一款来自俄国web开发人员的支持拖放的跨浏览器javascript文件上传类库：FileDrop。

主要特性

• 跨浏览器
• 独立并且体积非常小
• 支持不同的callback
• 使用iframe作为fallback
• 多文件选择
• 支持多个FileDrop实例
• 文档比较全

如何使用

最少的代码如下：

  
    

    

    
    /* Essential FileDrop element configuration: */
    .fd-zone {
      position: relative;
      overflow: hidden;
      width: 15em;
      text-align: center;
    }

    /* Hides  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; }
    
  
  
    <!-- A FileDrop area. Can contain any text or elements, or be empty.
         Can be of any HTML tag too, not necessary fieldset. -->
    

      
Drop a file inside…

      
Or click here to Browse..

    


    
      // Tell FileDrop we can deal with iframe. uploads using this URL:
      var ptions = {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');
        }
      });
    
  
 

来源：【简报】超棒的拖放式文件上传javascript类库：FileDrop