案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plupload使用指南</title>
<script src="js/plupload.full.min.js"></script>
</head>
<body>
<p>
<button id="btn">选择文件</button>
</p>
<script>
var uploader = new plupload.Uploader({
browse_button: 'btn',
url: 'http://localhost:3000/map',
filters: {
max_file_size: '100mb',
mime_types: [
{title: 'Image files', extensions: 'jpg,png,tif,bmp'}
]
}
});
uploader.init();
uploader.bind('FilesAdded', function (uploader, files) {
console.log(uploader,files);
uploader.start();
});
uploader.bind("BeforeUpload",function (uploader,file) {
console.log("开始上传",uploader,file);
});
uploader.bind('UploadProgress', function (uploader, file) {
console.log(file.id,file.name,file.percent);
});
uploader.bind("FileUploaded",function (uploader,file,responseObject) {
console.log("上传完成",uploader,file,responseObject);
});
</script>
</body>
</html>
file对象的相关属性
属性/方法 | 描述 |
---|
id | 文件id |
name | 文件名,例如”myfile.gif” |
type | 文件类型,例如”image/jpeg” |
size | 文件大小,单位为字节,当启用了客户端压缩功能后,该值可能会改变 |
origSize | 文件的原始大小,单位为字节 |
loaded | 文件已上传部分的大小,单位为字节 |
percent | 文件已上传部分所占的百分比,如50就代表已上传了50% |
status | 文件的状态,可能为以下几个值之一:plupload.QUEUED, plupload.UPLOADING, plupload.FAILED, plupload.DONE |
lastModifiedDate | 文件最后修改的时间 |
getNative() | 获取原生的文件对象 |
getSource() | 获取mOxie.File 对象,想了解mOxie是什么东西,可以看下https://github.com/moxiecode/moxie/wiki/API |
destroy() | 销毁文件对象 |