多文件上传 file-uploader.js

2023-07-18 21:43:28

插件暴露给用户可以设置的参数

插件构成

声明一个全局对象qq，在对象上封装几个方法，类似JQUERY的方法

qq.extend 合并对象属性，类似$.extend()

qq.indexOf 获取元素索引

qq.getUniqueId

qq.ie--qq.safari--qq.chrome--qq.firefox--qq.windows

qq.attach 事件绑定

qq.detach 解除事件绑定

qq.preventDefault 组织浏览器磨人行为

qq.insertBefore 插入元素

qq.remove

qq.contains

qq.toElement

qq.css

qq.hasClass

qq.addClass

qq.removeClass

qq.setText

qq.children

qq.getByClass

qq.obj2url 组合请求地址

qq.FileUploaderBasic 基本属性和外接方法

qq.FileUploaderBasic.prototype---文件上传插件的原型

setParams

getInProgress

_createUploadButton--创建上传按钮，包括上传按钮属性，事件

_createUploadHandler--上传处理程序

_preventLeaveInProgress

_onSubmit

_onProgress

_onComplete

_onCancel

_onUpload

_onInputChange

_uploadFileList

_uploadFile

_validateFile--文件校验，格式，大小等

_formatFileName 限制名字长度

_isAllowedExtension

_formatSize 格式化输出图片大小

qq.FileUploader

qq.extend() 追加新的参数，包含上传按钮，图片列表模板等基本信息

qq.FileUploader

addExtraDropzon

removeExtraDropzone

_leaving_document_out

_find--从this._options.classes中获取元素，包含上传按钮和图片列表

_setupExtraDropzone

_setupDropzone

_setupDragDrop

_onSubmit--先执行option参数中的onSubmit如果返回false，不再继续执行，否则再执行FileUploaderBasic的_onSubmit函数

　　提交上传FileUploader.prototype._onSubmit，_addToList是添加列表项；另外一提，qq.FileUploaderBasic.prototype._onSubmit.apply(this, arguments)；首先执行插件暴露的onSubmit方法里的代码块，这里是你实例化插件时可以附加的（选填）；

图片上传完成（complete）会接收一个JSON格式的响应，插件默认是使用{success:true/false}定义服务器端的响应，并且根据服务器端的响应，给上传列表添加是否上传成功的样式；可以在这个位置自定义服务器的返回格式；插件在上传完成以后默认是把加载效果spinner和取消上传按钮cancel移除DOM元素