前端 -＞ Plupload 一个Web浏览器上的界面友好的文件上传模块

方法列表：

Uploader(setting)：创建实例的构造方法
var uploader = new plupload.Uploader({
  runtimes : 'gears,html5,flash',browse_button : 'button_id'
});

bind(event, function[, scope])：绑定事件
uploader.bind('Init', function(up) {
  alert('Supports drag/drop: ' + (!!up.features.dragdrop));
});

destroy()：销毁plupload的实例对象uploader.destroy()

getFile(id): 获取上传文件信息
uploader.bind('FilesAdded', function(up, files) {
  for (var i in files) {
  up.getFile(files[i].id);
}});
<span style="color: #ff0000; font-size: 13px;"> </span>
注：
file：{
	id:文件编号,
	loaded: 已经上传多少字节,
	name: 文件名,
	percent: 上传进度,
	size: 文件大小,
	status: 有四种状态 QUEUED, UPLOADING, FAILED, DONE.对应数值
}

init:初始化plupload实例，添加监听对象uploader.destroy()

refresh：重新实例化uploader

removeFile(id):从file中移除某个文件

splice(start,length)：从队列中start开始删除length个文件， 返回被删除的文件列表

start() 开始上传

stop()停止上传

unbind(name, function): 接触事件绑定

unbindAll()解绑所有事件

属性集合：

features：uploader中包含那些特性

files:当前队列中的文件列表

id：uploader实例的唯一id

runtime：当前运行环境（是html5、flash等等)

state:当前上传进度状态

total：当前上传文件的信息集合

事件集合:（up为uploader缩写）

BeforeUpload(up, file)：文件上传完之前触发的事件

ChunkUploaded(up, file,response)文件被分块上传的事件

Destroy(up):uploader的destroy调用的方法

Error(up, err)：上传出错的时候触发

Fileadded(up, files):用户选择文件时触发

FileRemoved(up, files):当文件从上传队列中移除触发

FileUploaded(up, file, res):文件上传成功的时候触发

Init(up):当初始化的时候触发

PostInit(up):init执行完以后要执行的事件触发

QueueChanged(up):当文件队列变化时触发

Refresh(up):当silverlight/flash或是其他运行环境需要移动的时候触发

StateChanged(up)当整个上传队列被改变的时候触发

UploadComplete(up,file)当队列中所有文件被上传完时触发

UploadFile(up,file)当一个文件被上传的时候触发

UploadProgress(up,file):当文件正在被上传中触发

实例:

// 创建上传对象
createUpLoader: function () {
// 绑定上传按钮
	var config = {
		//省略
 		context: xx,
  		url: "",
  		init:{}
    },
    //实例化一个上传对象并加载配置
    //new plupload.Uploader(config);
    this.upLoader = new plupload.Uploader(config);
    //初始化
    this.upLoader.init();
    //开启事件的监控:this.filesAdded  
    //不要写成this.filesAdded(),使用赋值的样式,不是调用方法的样式
    this.upLoader.bind('filesAdded', this.filesAdded);
    //一定要注意this的范围,我在uploadComplete中使用了this.createUpLoader();
    //这个this本来是要指向createUpLoader的,但是如果我是在这里用了upLoader去调这个函数
    //那this.createUpLoader();的this外层就是upLoader,不是我想要的那个this范围了
    //所以用了bind(this),转化this的作用域,所以最好都加上.bind(this),不然就直接写在init里面
    //因为你把函数分开写,好看了,但是this的作用域已经改变了
    //  this.upLoader.bind('uploadComplete', this.uploadComplete);
    this.upLoader.bind('uploadComplete', this.uploadComplete.bind(this));
}

filesAdded: function (up, files) {
    console.log("入列");
    // 重置上传状态
    // 刷新文件夹名称
    up.start(); // 启动上传
},

uploadComplete: function (up, files) {
	this.createUpLoader();
},

改成写在init中:方式一:推荐,好处就是可以把函数分开写在外边

createUpLoader: function () {
	init: {
		FilesAdded: this.filesAdded.bind(this), // 入列后
		BeforeUpload: this.beforeUpload.bind(this), // 上传前
		
		FileUploaded: this.fileUploaded.bind(this),
		UploadComplete: this.uploadComplete.bind(this),
	}
}
filesAdded: function (up, files) {
    console.log("入列");
    // 重置上传状态
    // 刷新文件夹名称
    up.start(); // 启动上传
},

uploadComplete: function (up, files) {
	this.createUpLoader();
},

方式二:函数写在里边,函数太长了就不好看了

createUpLoader: function () {
	init: {
		FilesAdded:  function (up, files) {
						this.createUpLoader();
					}, // 入列后

		UploadComplete: function (up, files) {
							this.createUpLoader();
						},
	}
}