位置: 编程技术 - 正文

Jquery uploadify上传插件使用详解

编辑:rootadmin

推荐整理分享Jquery uploadify上传插件使用详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。首先按下面的步骤来实现一个简单的上传功能。

1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。

3 在项目中添加UploadFile文件夹,用来存放上传的文件。

进行完上面三步后项目的基本结构如下图:

4 Default.aspx的html页的代码修改如下:

5 UploadHandler类的ProcessRequest方法代码如下:

6 运行后效果如下图:

7 选择了两个文件后,点击上传,就可以看到UploadFile文件夹中会增加这两个文件。

上面简单地实现了一个上传的功能,依靠函数uploadify实现,uploadify函数的参数为json格式,可以对json对象的key值的修改来进行自定义的设置,如multi设置为true或false来控制是否可以进行多文件上传,下面就来介绍下这些key值的意思:

uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。 script : 后台处理程序的相对路径 。默认值:uploadify.php checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata method : 提交方式Post 或Get 默认为Post scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain folder : 上传文件存放的目录 。 queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。 queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值: 。 multi : 设置为true时可以上传多个文件。 auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。 fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:

fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。 sizeLimit : 上传文件的大小限制 。 simUploadLimit : 允许同时上传的个数 默认值:1 。 buttonText : 浏览按钮的文本,默认值:BROWSE 。 buttonImg : 浏览按钮的图片的路径 。 hideButton : 设置为true则隐藏浏览按钮的图片 。 rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。 width : 设置浏览按钮的宽度 ,默认值:。 height : 设置浏览按钮的高度 ,默认值:。 wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。 cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标,如下图:

上面介绍的key值的value都为字符串或是布尔类型,比较简单,接下来要介绍的key值的value为一个函数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作。

Jquery uploadify上传插件使用详解

onSelect :选择文件时触发,该函数有三个参数

event:事件对象。queueID:文件的唯一标识,由6为随机字符组成。fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type 5个属性。代码如下:

当选择一个文件后弹出的消息如下图:

onSelectOnce :在单文件或多文件上传时,选择文件时触发。该函数有两个参数event,data,data对象有以下几个属性:

fileCount:选择文件的总数。 filesSelected:同时选择文件的个数,如果一次选择了3个文件该属性值为3。 filesReplaced:如果文件队列中已经存在A和B两个文件,再次选择文件时又选择了A和B,该属性值为2。 allBytesTotal:所有选择的文件的总大小。

onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数,前三个参数同onSelect 中的三个参数,data对象有两个属性fileCount和allBytesTotal。

fileCount:取消一个文件后,文件队列中剩余文件的个数。 allBytesTotal:取消一个文件后,文件队列中剩余文件的大小。

onClearQueue :当调用函数fileUploadClearQueue时触发。有event和data两个参数,同onCancel 中的两个对应参数。

onQueueFull :当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。

onError :当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数,其中前三个参数同上,errorObj对象有type和info两个属性。

type:错误的类型,有三种‘HTTP', ‘IO', or ‘Security' info:错误的描述

onOpen :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数,参数的解释同上。

onProgress :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列,在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数,前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed:

percentage:当前完成的百分比 bytesLoaded:当前上传的大小 allBytesLoaded:文件队列中已经上传完的大小 speed:上传速率 kb/s

onComplete:文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数,前三个参数同上。response为后台处理程序返回的值,在上面的例子中为1或0,data有两个属性fileCount和speed

fileCount:剩余没有上传完成的文件的个数。 speed:文件上传的平均速率 kb/s

注:fileObj对象和上面讲到的有些不太一样,onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。

onAllComplete:文件队列中所有的文件上传完成后触发。该函数有event和data两个参数,data有四个属性,分别为:

filesUploaded :上传的所有文件个数。 errors :出现错误的个数。 allBytesLoaded :所有上传文件的总大小。 speed :平均上传速率 kb/s

相关函数介绍

在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数,除此之外还有几个函数:

uploadifySettings:可以动态修改上面介绍的那些key值,如下面代码

如果上传按钮的事件写成下面这样,文件将会上传到uploadifySettings定义的目录中

uploadifyCancel:该函数接受一个queueID作为参数,可以取消文件队列中指定queueID的文件。

终于写完了,对JQuery这个上传插件也基本了解了,希望对大家有所帮助,不对之处还望大家指正。

基于jquery实现的仿优酷图片轮播特效代码 本文为大家分享了一种常见的并且比较复杂的轮播效果,就是优酷主界面的轮播图,效果图如下:我们在书写代码之前,先分析效果图的结构:1.左右两

JSON+Jquery省市区三级联动 效果图如下所示:废话不多说了,直接给大家贴代码了,具体代码如下所示:scriptsrc="../Scripts/jquery-1.4.1.min.js"type="text/javascript"/script!--读取数据库,以jso

jQuery简单操作cookie的插件实例 本文实例讲述了jQuery操作cookie的插件。分享给大家供大家参考,具体如下:jQuery.cookie=function(name,value,options){if(typeofvalue!='undefined'){//nameandvaluegiven,setcookie

标签: Jquery uploadify上传插件使用详解

本文链接地址:https://www.jiuchutong.com/biancheng/380607.html 转载请保留说明!

上一篇:jquery对复选框(checkbox)的操作汇总(jq复选框选中触发事件)

下一篇:基于jquery实现的仿优酷图片轮播特效代码(jquery的实现原理)

  • 核定征收企业所得税暂行办法
  • 土地增值税特点不包括
  • 取得的免税发票怎么开
  • 挂靠到运输公司的车转让给个人如何交增值税
  • 内含报酬率与必要报酬率相等
  • 定期定额征收和核定征收一样吗
  • 老板住酒店的住宿费发票入什么会计科目
  • 小规模纳税人不能抵扣进项税额
  • 公司报销房租还能扣税吗
  • 二房东转租需要备案吗
  • 房产税和城市房地产税
  • 应交房产税通过应交税费核算吗
  • 记账凭证账务处理程序步骤
  • 复利现值系数和普通年金现值系数关系
  • 税率及征收率的区别
  • 公益性捐赠纳税调整案例
  • 年报怎么看
  • 没有真实业务的票据贴现
  • 为什么要开增值税
  • 2021虚开发票案例
  • 投资收益所得税税前扣除
  • 普通发票离线限额为0
  • 人力资源公司为个人代缴社保
  • 增长率的六个公式
  • 挂名财务负责人会坐牢吗
  • 应纳税所得额未减上季度所得税,下季度可补减吗
  • 年度报告包括哪些内容
  • 对个体工商户个人的认识
  • 辅导期纳税人领票预缴税款
  • 补缴增值税和滞纳税区别
  • 房产税的会计科目怎么做
  • SetPoint.exe - SetPoint是什么进程 有什么用
  • php笔记程序
  • 购销合同印花税税率2023
  • 预计负债的概念是什么
  • 基于php的系统
  • 银行转账手续费最高多少钱
  • 分公司怎么开独立开票
  • vue3动态路由权限
  • 制造业企业资金如何循环周转
  • 人工智能答案
  • 进口增值税科目
  • 筹建期间发生的收入
  • 增值税进项税抵扣凭证
  • 税务自查报告范文自查报告怎么写
  • reactjs.org
  • php判断https
  • mongodb writeconcern
  • 红字发票开错了是可以作废的吗?
  • 商誉在资产负债表中如何体现
  • 个体工商户的免税证明
  • 中小企业投标费怎么算
  • 进项税转出怎样做账务处理
  • 增值税发票备注栏最新规定
  • 运输费增值税专用发票
  • 收到保险公司赔款
  • 财政返还什么意思
  • sql2000怎么修改默认实例名
  • mysql爆破字典
  • centos6 rpm
  • perform.exe是什么进程
  • kworker进程如何解决
  • windows7播放器在哪找
  • Win7电脑开机桌面黑屏只有鼠标
  • Win7中TrustedInstaller.exe进程占用内存高该怎么解决?
  • eclipse 单词
  • css display:none使用注意事项小结
  • unity火球特效
  • nodejs事件循环和js事件循环
  • dom和javascript的关系
  • 读取更新包文件发生错误
  • javascript高级程序设计电子书
  • jquery easyui开发指南
  • 广东省国税局长是谁
  • 公益性捐赠支出属于什么会计科目
  • 个人以土地投资入股都需缴纳哪些税
  • 净缴税什么意思
  • 进口设备应缴纳的关税
  • 上海哪能玩
  • 增值税发票打印机怎么调整打印位置
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设