首页 技术 正文
技术 2022年11月16日
0 收藏 812 点赞 2,608 浏览 2156 个字

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

多文件上传 file-uploader.js

插件构成

声明一个全局对象qq,在对象上封装几个方法,类似JQUERY的方法qq.extend 合并对象属性,类似$.extend()qq.indexOf 获取元素索引qq.getUniqueIdqq.ie–qq.safari–qq.chrome–qq.firefox–qq.windowsqq.attach 事件绑定qq.detach 解除事件绑定qq.preventDefault 组织浏览器磨人行为qq.insertBefore 插入元素qq.removeqq.containsqq.toElementqq.cssqq.hasClassqq.addClassqq.removeClassqq.setTextqq.childrenqq.getByClassqq.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() 追加新的参数,包含上传按钮,图片列表模板等基本信息    多文件上传 file-uploader.js多文件上传 file-uploader.js     qq.FileUploader    addExtraDropzon    removeExtraDropzone    _leaving_document_out    _find–从this._options.classes中获取元素,包含上传按钮和图片列表    _setupExtraDropzone    _setupDropzone    _setupDragDrop    _onSubmit–先执行option参数中的onSubmit如果返回false,不再继续执行,否则再执行FileUploaderBasic的_onSubmit函数    多文件上传 file-uploader.js    多文件上传 file-uploader.js

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

 图片上传完成(complete)会接收一个JSON格式的响应,插件默认是使用{success:true/false}定义服务器端的响应,并且根据服务器端的响应,给上传列表添加是否上传成功的样式;可以在这个位置自定义服务器的返回格式;插件在上传完成以后默认是把加载效果spinner和取消上传按钮cancel移除DOM元素  多文件上传 file-uploader.js多文件上传 file-uploader.js    _addToList–控制上传文件列表中的内容,一般是列表模板中定义的需要的文件相关信息,图片名称,大小    _getItemByFileId–获取当前列表项的DOM对象    __bindCancelEvent–定义取消上传按钮的事件,取消事件的类名是在_classes中定义的cancel 如果是自定义上传列表模板,需修改fileTemplate和classes,并且要一一对应,classes对象中的属性必须出现;(比较麻烦) qq.UploadDropZone–定义拖拽构造函数qq.UploadDropZone.prototype–拖拽原型 qq.UploadButton–定义上传按钮qq.UploadButton.prototype    getInput    reset    _createInput–创建上传按钮,包含样式,属性和事件   qq.UploadHandlerAbstract–上传插件抽象函数,辅助函数qq.UploadHandlerAbstract.prototype    log–日志    add    upload qq.UploadHandlerXhr–异步上传qq.UploadHandlerXhr.prototype–异步上传原型,包含异步上传的所有方法    add    getName    getSize    getLoaded    _upload–图片上传细节,创建XMLHttpRequest,监听status,设置请求头  多文件上传 file-uploader.js    多文件上传 file-uploader.js    _onComplete–在_upload中服务器响应后调用    _cancel–终止异步请求    多文件上传 file-uploader.js多文件上传 file-uploader.js 现在这个插件项目已经迁移到fine-uploader项目上了,以后会对插件使用规范下一下文档

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,078
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,553
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,402
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,177
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,814
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,898