详解jQuery uploadify文件上传插件的使用方法

前端之家收集整理的这篇文章主要介绍了详解jQuery uploadify文件上传插件的使用方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传功能

现在最新版为3.2.1。

在线实例

实例中用到的PHP文件UploaderDemo.PHP请在页面下方下载

引入文件

使用方法

参数说明

属性 属性名称文件后就直接上传了,为false需要点击上传按钮才上传 。图片的路径 。文件上传重复性检查程序,检查即将上传文件在服务器端是否已存在,存在返回1,不存在返回0文件上传对象的名称,如果命名为'the_files',PHP程序可以用$_FILES['the_files']来处理上传文件对象。上传文件的大小限制 ,如果为整数型则表示以KB为单位的大小,如果是字符串,则可以使用(B,KB,MB,or GB)为单位,比如'2MB';

属性值必须设置fileTypeExts属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileTypeDesc为“请选择rar doc pdf文件”文件的类型,格式如:'*.doc;*.pdf;*.rar' 。上传每个文件的同时提交到服务器的额外数据,可在'onUploadStart'事件中使用'settings'方法动态设置。上传队列的HTML模版,可以使用以下标签: instanceID – Uploadify实例的ID fileID – 列队中此文件的ID,或者理解为此任务的ID fileName – 文件名称 fileSize – 当前上传文件的大小 插入模版标签时使用格式如:${fileName}上传多个文件。上传文件自动加上一串随机字符串参数,防止URL缓存影响上传结果上传进度显示方式,percentage显示上传百分比,speed显示上传速度上传队列容器DOM元素的ID,如果为false则自动生成一个队列容器。显示的任务数量,如果选择的文件数量超出此限制,将会出发onSelectError事件。 注意此项并非最大文件上传数量,如果要限制最大上传文件数量,应设置uploadLimit。自动将已完成任务从队列中删除,如果设置为false则会一直保留此任务显示。自动从队列中移除,则可以规定从完成到被移除的时间间隔。上传失败后将返回错误,并重新加入任务队列上传。文件上传成功后服务端应返回成功标志,此项设置返回结果的超时时间文件的相对路径。PHP后台处理程序的相对路径。上传文件数量,如果达到或超出此限制将会触发onUploadError事件。文件浏览按钮的宽度。

名称文件队列中文件关闭按钮或点击取消上传时触发,file参数为被取消上传文件对象

调用函数cancel方法时触发,queueItemCount参数为被取消上传文件数量。方法被调用时触发文件浏览框关闭时触发,如果将此事件被重写,则当向队列添加文件上传出错时不会弹出错误消息提示

属性:

    filesSelected 文件选择对话框中共选择了多少个文件
  • filesQueued 已经向队列中添加了多少个文件
  • filesReplaced 已经向队列中替换了多少个文件
  • filesCancelled 取消了多少个文件 filesErrored 出错了多少个文件
logopen()文件选择对话框弹出时立即出发,但可能在文件选择对话框被关闭之前并不能全部执行。方法禁用Uploadify上传按钮时被调用时触发。方法启用Uploadify上传按钮时被调用时触发。不支持flash时触发。文件上传队列处理完毕后触发。

属性:

文件后向队列中添加每个上传任务时都会触发。

文件后向队列中添加每个上传任务时如果失败都会触发。

文件对象

错误代码如下:

    QUEUE_LIMIT_EXCEEDED – 任务数量超出队列限制;
  • FILE_EXCEEDS_SIZE_LIMIT – 文件大小超出限制;
  • ZERO_BYTE_FILE – 文件大小为0
  • INVALID_FILETYPE – 文件类型不符合要求

错误提示,可通过'this.queueData.errorMsg'定制

文件载入成功后触发。文件上传完毕后无论成功与否都会触发。文件上传出错时触发,参数由服务端程序返回。上传队列的过程中会多次触发此事件,每当任务状态有更新时都会触发。

    file – 文件对象
  • bytesUploaded – 已上传的字节数
  • bytesTotal – 文件总字节数
  • totalBytesUploaded – 当前任务队列中全部文件上传的总字节数
  • totalBytesTotal – 当前任务队列中全部文件的总字节数
文件即将开始上传时立即触发文件上传成功时触发

    file – 文件对象
  • data – 服务端输出返回的信息
response – 有输出时为true,如果无响应为false,如果返回的是false,当超过successTimeout设置的时间后假定为true

方法 方法名称上传

    fileID – 要取消的文件ID,如果为空则取消队列中第一个任务,如果为'*'则取消所有任务
  • suppressEvent – 是否阻止触发onUploadCancel事件,当清空队列时非常实用。
  • 文件上传按钮恢复到原始状态
  • 文件浏览按钮

  • 获取或设置Uploadify实例参数

      name – 属性名称,如果只提供属性名称则表示获取其值
    • value – 属性
    • resetObjects – 设置为true时,更新postData对象将清空现有的值。否则,新的值将被添加到其末尾。
  • 上传的任务
  • 上传指定的文件,如果fileID为'*'表示上传所有文件,要指定上传多个文件,则将每个文件的fileID作为一个参数
  • 文件UploaderDemo.PHP下载

    以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

    猜你在找的jQuery相关文章