一、前言
首先,为什么要写这个插件呢?分析下现在大家用的比较多的上传插件,大多是flash版本的,事实上我在前段时间一直用的是一个叫做uploadify的插件,官网http://www.uploadify.com.其官网提供了两个版本,flash的,免费,html5的,收费。其flash版本的做的挺不错,很多可以配置的参数,但是用flash的缺点也是很明显的:1.加载时间长;2.不支持flash的设备(ipad)不能使用。关于这个html5版本的,这里必须要鄙视一下,竟然要收费!太不地道了。而这个正是我写这个插件的动力:做一个免费的插件,而且要跟你的功能一模一样!于是,照着官方的api,开始动手了。。。uploadify,我要断你财路了
html5标准对file控件做了很多扩展,包括可以在客户端读取文件信息等,可参考http://www.w3.org/TR/file-upload/。另外一个就是关于xmlHttpRequest对象,也做了新的扩展,可以实时反馈上传文件的进度。可参考http://www.w3.org/TR/XMLHttpRequest/。利用这些新特性,做一个上传插件就轻而易举了。搜一下网上关于html5上传的文章,不少,有些是简单的一些介绍,有些是做出了插件,但是功能不太多。在此必须提一下@张鑫旭(http://www.zhangxinxu.com)的一篇文章,给了我很大帮助,事实上,我就是在他所写的核心文件基础上做的,所以ZXXFILE这个名字也给留着没改。
二、先拉出来遛遛
是骡子是马,先拉出来看看吧。先上截图:
这个骡子不错吧。插件有以下特性:
1.支持多文件上传
2.带进度条
3.可以显示文件名称
4.可以实时显示已上传的大小
5.可以从队列中删除
6.各元素的样式都可以自己控制
此demo的全部代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="html5uploader.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.html5uploader.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#upload').html5uploader({
auto:false,
multi:true,
removeTimeout:9999999,
url:'upload.php',
onUploadStart:function(){
alert('开始上传');
},
onInit:function(){
alert('初始化');
},
onUploadComplete:function(){
alert('上传完成');
}
});
});
</script>
</head>
<body>
<div id="upload"></div>
</body>
</html>
dom中只需有一个div容器即可。
三、插件的使用
参加demo页面就可以啦!
四、关于配置参数
上面说了,这个插件是照着uploadify的api文档写的,那么,我就省了写文档啦,哈哈。各参数如何配置,参看他官方的文档就可以了。等于我这个是山寨产品,免费使用。
下载页面:http://download.csdn.net/detail/never_say_goodbye/5077796
分享到:
相关推荐
新鲜出炉:Ubuntu12
新鲜出炉:appium2.0+ 单点触控和多点触控新的解决方案.doc
这段时间我们已经陆续向大家分享了很多绚丽实用的HTML5/CSS3应用插件,今天,我从资料库中精选了7款最新出炉的HTML5/CSS3应用分享给大家,希望大家喜欢。 1、HTML5/CSS3发光文字 可自定义文字色彩 效果很赞 前几天我...
微软等数据结构+算法面试100题最后20题第81-100题新鲜出炉 ---100题系列V0.1版完整公布 作者:July 时间:2010年12月5日 ============= 首先,非常感谢各位,对本微软面试100题系列前期工作的大力支持。 很多很多...
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery、zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又长还收费,我就忍不住...
20210411-中泰证券-有色金属行业全球新能源车3月数据出炉:锂电上游材料上涨趋势进一步强化.pdf
新鲜出炉:leopard硬盘安装史重要更新:leopard硬盘安装助手 支持iso文件 1 格式化一盘为fat32 或将盘上所有文件 含隐藏的 删空 2 打开程序 选镜象文件 支持iso文件 3 目标盘选刚才格的盘 点开始进行镜象 4 重启 你...
与大家分享的是10款新鲜出炉的基于 jQuery 开发的 Ajax 插件,有幻灯片、图片画廊、菜单等很多有用的插件。这些作者的想法特别新颖,希望你能从中找到自己需要的插件。
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
MHI & 德勤-MHI报告出炉:未来3-5年物流供应链技术实用性见解-4-51页.pdf
jar 包 授权文件 亲测可用;dbvisualizer 10.0.10-11都可用
环保:PPP第四批示范项目出炉:环保成为大赢家.pdf
医保谈判结果出炉:多款国产创新药谈判成功.pdf
火爆出炉:微软等数据结构+算法面试100题
行榜出炉:义乌、永康和余姚名列前三.pdf
消费行业日报:2019年中国连锁百强出炉:苏宁蝉联榜首国美第二.pdf
家用电器行业周报:618出炉:龙头齐绽放,清洁电器集成灶热度不减.pdf
光伏行业点评:2019年电池片排名出炉:扩产进行中,行业洗牌持续.pdf
光伏行业点评:2019年组件排名出炉:龙头市占持续提升,高效组件需求增加
联合国报告出炉:距实现全球“零饥饿”仍面临巨大挑战