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

插件构成

声明一个全局对象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元素
  
    _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,设置请求头
  
    
    _onComplete--在_upload中服务器响应后调用
    _cancel--终止异步请求
    
 
现在这个插件项目已经迁移到fine-uploader项目上了,以后会对插件使用规范下一下文档

多文件上传 file-uploader.js的更多相关文章

  1. HTML5文件上传器,纯脚本无插件的客户端文件上传器---Uploader 文件上传器类

    概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...

  2. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  3. 文件上传:swfupload.js、blueimp-file-upload

    一.swfupload 1.下载swfupload http://code.google.com/p/swfupload/ 2. 3.API  http://www.cnblogs.com/henw/ ...

  4. 前端异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  5. 文件上传限制条件(JS、后缀、文件名、类型、截断)绕过及修复建议

    在现代互联网的Web应用程序中,上传文件是一 种常见的功能,因为它有助于提高业务效率,比如企业的OA系统,允许用户上传图片.视频.头像和许多其他类型的文件.然而向用户提供的功能越多,Web应用受到攻击 ...

  6. 《Play for Java》学习笔记(六)文件上传file upload

    一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...

  7. 文件上传-jquery.uploadify.js

    <script type="text/javascript" src="../jquery_uploadify/jquery.uploadify-3.1.min.j ...

  8. Django处理文件上传File Uploads

    HttpRequest.FILES 表单上传的文件对象存储在类字典对象request.FILES中,表单格式需为multipart/form-data <form enctype="m ...

  9. 自定义input文件上传 file的提示文字及样式

    简单记录一下 效果图: 代码: <input class="aload" type='button' value='上传附件' onClick='javascript:$(& ...

  10. 文件上传漏洞之js验证

    0x00 前言 只有前端验证=没有验证 0x01 剔除JS 打开burpsuite,进入Proxy的Options,把Remove all JavaScript选上. 设置浏览器代理直接上传PHP木马 ...

随机推荐

  1. load和get的延迟加载

    load和get方法的区别: Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象. 区别在于: 如果未能发现符合条件的记录,get方法返回nul ...

  2. sublime 插件

    由于之前的代码可视化方案太复杂,分析时间太长,不实用,另一方面是而且工作以后业余时间大大减少,因此决定放弃原有路线,从工作中最迫切的需求着手,逐步构建一个实用的工具. 新的方法仍然依赖understa ...

  3. thinkphp怎么实现图片验证码

    1.控制器 function verify() { ob_clean();//丢弃输出缓冲区中的内容 $config = array( 'fontSize' => 20, // 字体大小 'le ...

  4. Clone Graph leetcode java(DFS and BFS 基础)

    题目: Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. ...

  5. Android只能动态注册的广播Action

    只能动态注册的广播(部分): android.intent.action.SCREEN_ON android.intent.action.SCREEN_OFF android.intent.actio ...

  6. VirtualBox中Ubuntu 14.04屏幕分辨率不能设置的问题

    VirtualBox中Ubuntu 14.04屏幕分辨率不能设置的问题   在VirtualBOx虚拟机中Ubuntu 14.04设置屏幕分辨率,怎么点都没反应. 方法一:安装与你的Ubuntu-Gu ...

  7. 关于IE8兼容svg图片问题解决

    参考 http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/ 对博主表示感谢,详述请参考上述链接 直接把代码复制过来了,备份记录下 < ...

  8. bzoj 1014 splay维护hash值

    被后缀三人组虐了一下午,写道水题愉悦身心. 题很裸,求lcq时二分下答案就行了,写的不优美会被卡时. (写题时精神恍惚,不知不觉写了快两百行...竟然调都没调就A了...我还是继续看后缀自动机吧... ...

  9. ubuntu16.04装MatConvNet

    按matconvnet官网上的步骤来,编译代码的时候会发现编译失败. 参考这条issues 以下是我的解决方案: I use ubuntu16.04 with x64 architecture. I ...

  10. BigDecimal 加减乘除

    BigDecimal bignum1 = new BigDecimal("10"); BigDecimal bignum2 = new BigDecimal("5&quo ...