dropfile.js强大的文件上传插件，支持拖放、选择

dropfile.js强大的文件上传插件，支持拖放、选择、文件处理、缩略图生成、blob文件切割

简单例子如下

//我们用iframe来上传文件:
var optiBfwOns= {iframe: {url: 'upload.php'}}
// zone是个html元素的id
var zBfwOne= new FileDrop('zone', options)

// 当用户选择文件时触发事件:
zone.event('send', function (files) {
  // FileList might contain multiple items.
  files.each(function (file) {
    // Send the file:
    file.sendTo('upload.php')
  })
})

<!-- 上传区域 可以包含任何元素，也可以为空，可以为任何元素，不一定是fieldset
      -->
<fieldset id="zone">
  <legend>Drop a file inside...</legend>
  <p>Or click here to <em>Browse</em>...</p>
</fieldset>

就这样拖放上传和选择文件上传完成了

那么他有哪些事件呢

上传成功返回数据

var optiBfwOns= {iframe: {url: 'upload.php'}}
var zBfwOne= new FileDrop('zone1', options)

zone.event('send', function (files) {
  files.each(function (file) {
    // React on successful AJAX upload:
    file.event('done', function (xhr) {
      // Here, 'this' points to fd.File instance.
      alert(xhr.responseText)
    })

    file.sendTo('upload.php')
  })
})

// Successful iframe upload uses separate mechanism
// from proper AJAX upload hence another listener:
zone.event('iframeDone', function (xhr) {
  alert(xhr.responseText)
})

传递自定义参数

var zBfwOne= new FileDrop('zone2')

zone.event('send', function (files) {
  files.each(function (file) {
    file.event('done', function (xhr) {
      alert(xhr.responseText)
    })

    // byID() gets checkbox node by its ID:
    var value = fd.byID('upload_option').checked ? '1' : '0'
    // Change the receiving URL:
    file.sendTo('upload.php?upload_option=' + value)
  })
})
<!-- As you see we don't have to use a fieldset, any container will work: -->
<div id="zone2">
  <p class="legend">Drop a file inside...</p>
  <p>
    <input type="checkbox" id="upload_option">
    <label for="upload_option">Toggle me!</label>
  </p>
</div>

上传错误处理

var zBfwOne= new FileDrop('zone3')

zone.event('send', function (files) {
  files.each(function (file) {
    // Listen for errors:
    file.event('error', function (e, xhr) {
      alert(xhr.status + ', ' + xhr.statusText)
    })

    file.sendTo('this-is-a-wrong-place-to-go.php')
  })
})

上传超时处理

var zBfwOne= new FileDrop('zone4')

zone.event('send', function (files) {
  files.each(function (file) {
    file.event('error', function (e, xhr) {
      if (xhr.readyState == 4 && !xhr.status) {
        alert('Timeout reached, request aborted.')
      } else {
        alert(xhr.status + ', ' + xhr.statusText)
      }
    })

    setTimeout(function () {
      // Aborting a request changes XMLHttpRequest status to
      // "done but failed" and thus fires all registered error
      // callbacks. The same happens if user aborts upload
      // implicitly by navigating away or pressing Escape.
      file.abort()
    }, 3000)

    file.sendTo('wait-forever.php')
  })
})

上传停止

var zBfwOne= new FileDrop('zone5')

// FileList is a simple array-like object
// with many useful File-related methods:
var active = new fd.FileList

// Enabling multifile upload so you can
// test aborting several requests at once
// (one file is sent by its own XMLHttpRequest):
zone.multiple(true)

zone.event('send', function (files) {
  files.each(function (file) {
    file.event('done', function (xhr) {
      alert(xhr.responseText)
    })

    file.sendTo('wait-forever.php')
    active.push(file)
  })
})

// This is called when you click the button:
window.stopAll = function () {
  active.abort()
  alert('Aborted ' + active.length + ' upload(s).')
  active.clear()
}

<div id="zone5">
  <p class="legend">Drop a file inside...</p>
  <p><button BfwOnclick="stopAll()">Stop them!</button></p>
</div>

iframe上传回调

var optiBfwOns= {iframe: {url: 'upload.php'}}
var zBfwOne= new FileDrop('zone6', options)

zone.event('send', function (files) {
  files.each(function (file) {
    file.event('done', function (xhr) {
      alert(xhr.responseText)
    })

    var value = fd.byID('zone6_option').checked ? '1' : '0'
    file.sendTo('upload.php?upload_option=' + value)
  })
})

// Update <iframe> URL when the checkbox is toggled:
fd.addEvent(fd.byID('zone6_option'), 'change', function () {
  var value = fd.byID('zone6_option').checked ? '1' : '0'
  zone.opt.iframe.url = 'upload.php?upload_option=' + value
})

读取上传文件内容

var optiBfwOns= {input: false}
var zBfwOne= new FileDrop('zone9', options)

zone.event('send', function (files) {
  files.each(function (file) {
    file.readData(
      function (str) { zone.el.value = str },
      function (e) { alert('Terrible error!') },
      'text'
    )
  })
})

<textarea id="zone9" readBfwOnly="readonly">
Drag & drop a file here to view its contents.
</textarea>

进度条

var zBfwOne= new FileDrop('zone10')

zone.event('send', function (files) {
  files.each(function (file) {
    // Reset the progress when a new upload starts:
    file.event('sendXHR', function () {
      fd.byID('bar_zone10').style.width = 0
    })

    // Update progress when browser reports it:
    file.event('progress', function (current, total) {
      var width = current / total * 100 + '%'
      fd.byID('bar_zone10').style.width = width
    })

    file.sendTo('upload.php')
  })
})

<div id="zone10">
  <p class="legend">
    Drop a large file to see some progress...
  </p>

  <!-- You can also use <progress> tag of HTML5: -->
  <p class="progress">
    <span id="bar_zone10"></span>
  </p>
</div>

html5 拖放

var zBfwOne= new FileDrop('zone12', {input: false})

zone.event('send', function (files) {
  files.each(function (file) {
    alert(file.name + ' (' + file.size + ') bytes')
  })
})

var zBfwOne= new FileDrop('zone11')
zone.multiple(true)

// opt.input contains file input created by FileDrop:
zone.opt.input.file.BfwOnchange= function (e) {
  // eventFiles() retrieve dropped File objects in
  // a cross-browser fashion:
  zone.eventFiles(e).each(function (file) {
    alert(file.name + ' (' + file.size + ') bytes')
  })
}

缩略图生成

var zBfwOne= new FileDrop('zone13', {input: false})

zone.event('send', function (files) {
  // images() filter away all but image/* files:
  files.images().each(function (file) {
    file.readData(
      function (uri) {
        var img = new Image
        img.src = uri
        alert('Got an ' + file.type)    // e.g. image/jpeg.
        zone.el.appendChild(img)
      },
      function (error) {
        alert('Ph, noes! Cannot read your image.')
      },
      'uri'
    )
  })
})

如何读取文件部分数据

var zBfwOne= new FileDrop('zone14', {input: false})

zone.event('send', function (files) {
  files.each(function (file) {
    file.read({
      start: 5,
      end: -10,
      func: 'cp1251',
      onDone: function (str) {
        alert('A snippet from your CP1251-encoded file:\n' + str)
      },
      onError: function (e) {
        alert('Failed to read the file! Error: ' + e.fdError)
      }
    })
  })
})

var zBfwOne= new FileDrop('zone15', {input: false})

zone.event('upload', function (e) {
  zone.eventFiles(e).each(function (root) {
    var ok = root.listEntries(
      function (files) {
        // We now have standard FIleDrop's FileList with File
        // members that are either files or directories.
        files.images().each(function (file) {
          // Just as in the other sample...
          file.readDataURI(function (uri) {
            var img = new Image
            img.src = uri
            zone.el.appendChild(img)
          })
        })
      },
      function (e) {
        alert('Problem reading the file system: ' + e.code)
      }
    )

    ok || alert('Cannot list ' + root.name + ' - unsupported?')
  })
})

fd.jQuery()  // you can also pass an object like 'jQuery' or '$'.

// Henceforth it's possible to access FileDrop as $().filedrop().
$('<div><p>Drop something here...</p></div>')
  .appendTo(document.body)
  .filedrop()
  // jQuery always passes event object as the first argument.
  .on('fdsend', function (e, files) {
    files.invoke('sendTo', 'upload.php')
  })
  .on('filedone', function (e, file) {
    alert('Done uploading ' + file.name + ' on ' + this.tagName)
  })