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

最新推荐文章于 2025-05-06 16:50:36 发布

转载最新推荐文章于 2025-05-06 16:50:36 发布 · 106 阅读

文章标签：

本文介绍了一款由俄国web开发者提供的支持拖放操作的跨浏览器JavaScript文件上传类库FileDrop，其特点包括跨浏览器独立、体积小巧、支持不同回调、使用iframe作为备选方案、多文件选择及多个FileDrop实例，提供了详细的使用示例。

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

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

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

主要特性

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

如何使用

最少的代码如下：




Basic FileDrop example




    /* 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. --&gt

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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/8288/viewspace-742360/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/8288/viewspace-742360/