基于jquery的上传插件Uploadify

2016-02-20 01:03 10 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的基于jquery的上传插件Uploadify,希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发 】

无论是做Web产品还是Web项目,文件上传是经常要用到的功能。以前经常听到做项目的同事抱怨:这款文件上传控件功能强大但是用起来麻烦,最简单的input上传使用方便但是功能太简单(例如不支持多文件),外观也不尽如人意。之后我一直留意网上的上传控件,最近看到一款基于jquery的上传插件Uploadify无论在功能、外观、可用性和扩展性上都有不错表现,于是研究了一番,介绍给大家。

 

Uploadify

 

简介

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下:

支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel) 通过接口参数和CSS控制外观 更多

相关链接

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

Uploadify主页地址: 在该页面你可以了解到关于他的更多内容。

Uploadify在线演示:

Uploadify配置参数及接口文档:

Uploadify插件下载地址:

使用方法

下载插件安装包后,可以看到里面的几个主要文件:jquery.uploadify.js(完成上传功能的脚本文件,在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件,flash控件)、upload.php(服务器端处理文件,官方仅提供了php版的) 引用了插件文件后,在页面中做如下调用:
//声明一个普通的html文件上传控件,并指定idinput type="file" name="fileInput" id="fileInput" /
 //将声明的普通上传控件与Uploadify插件绑定script type="text/javascript"$(document).ready(function() {$('#fileInput').fileUpload ({//以下参数均是可选'uploader'  : 'uploader.swf',   //指定上传控件的主体文件,默认‘uploader.swf’'script': 'upload.php',   //指定服务器端上传处理文件,默认‘upload.php’'cancelImg' : 'cancel.png',   //指定取消上传的图片,默认‘cancel.png’'auto'  : true, //选定文件后是否自动上传,默认false'folder': '/uploads' //要上传到的服务器路径,默认‘/’'muti' : true, //是否允许同时上传多文件,默认false'fileDesc' : 'rar文件或zip文件'  //出现在上传对话框中的文件类型描述'fileExt'   : '*.rar;*.zip',  //控制可上传文件的扩展名,启用本项时需同时声明fileDesc'sizeLimit': 86400   //控制上传文件的大小,单位byte'simUploadLimit' :5 //多文件上传时,同时上传文件数目限制});});/script 上面列出了我认为常用的配置选项,此外还有很多参数可配置,参考官方文档
通过调用相关功能函数,声明功能按钮。
例如声明上传功能按钮(自动上传时不需要):

 

a href="javascript:$('#fileInput').fileUploadStart();"上传文件/a

声明取消多文件上传时上传队列:

a href="javascript:$('#fileInput').fileUploadClearQueue();"取消上传队列/a

来源:https://www.tulaoshi.com/n/20160220/1633142.html

延伸阅读
标签: Web开发
打包下载 想着自己学习Javascript,以及Ajax、jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的基本格式,理一下基本的思路,动工吧。。。 这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面Me...
标签: Web开发
  改进的代码部分主要如下: 1、创建default.css文件: 代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid #cef; z-index: 1000...
标签: Web开发
先来看看使用方法。 演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htm HTML文件中这样写: 代码如下: div img src="1.jpg" alt="" div 这是点开后的页面的内容 /div /div 调用的话需要这样写: 代码如下: $(document).ready(function(){ options={ 'speedIn':600, //图片进入时候的动画速度 'speedOu...
标签: Web开发
打包下载 本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些。 2.0版本 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height 104) { options.height = o.height; } el...
标签: Web开发
代码如下: /* * Copyright (c) 2010 刘建华 * * The above copyright notice shall be * included in all copies or substantial portions of the Software. * Example: divdemo/div divdemo/div script type="text/javascript" var o = $(document); o.mousemove( function(e){ var d = document.getElementById("demo"); d.s...

经验教程

203

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部