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')
})
})
html<!-- 上传区域 可以包含任何元素，也可以为空，可以为任何元素，不一定是fieldset
-->
<fieldset id="zone">
<legend>Drop a file inside...</legend>
<p>Or click here to <em>Browse</em>...</p>
</fieldset>
就这样拖放上传和选择文件上传完成了
那么他有哪些事件呢
| any | 任何事件都会触发any事件 |
| dragEnter | 拖放的文件浮在拖放区域上面或者窗体上面，还没释放鼠标按钮 |
| dragLeave | 拖放的文件离开拖放区域或者窗体 |
| dragOver | 拖放的文件一直在拖放区域上方 |
| uploadElsewhere | 其他的DropHandle对象上传事件，比如有好几个控件上传，可以监控的其他的控件上传事件 |
| upload | 当用户的拖放的文件拖入拖放区域后触发 |
| inputSetup | 当input file标签创建完成后触发 |
| iframeSetup | 当上传的iframe创建完毕后触发 |
| iframeDone | 当iframe上传完会的服务器的返回信息时触发 |
上传成功返回数据
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 () {
/...点击查看剩余70%
{{collectdata}}
网友评论0