基于HTML5的jquery文件上传插件

所属分类:输入-上传

 292016  624  查看评论 (245)
分享到微信朋友圈
X
基于HTML5的jquery文件上传插件 ie兼容9

一、前言

    首先,为什么要写这个插件呢?分析下现在大家用的比较多的上传插件,大多是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文档写的,那么,我就省了写文档啦,哈哈。各参数如何配置,参看他官方的文档就可以了。等于我这个是山寨产品,免费使用。

相关插件-上传

手机端实现多图片上传预览

HTML+CSS+原生JS实现手机端实现多图片上传,选中图片后,可以点击放大(有一定的注释,在PC,ipad,IOS和安卓上都测试过)
  上传
 34598  313

兼容所有浏览器的多图上传预览(原创)

兼容所有浏览器的多图上传预览兼容IE 789.在一个界面上展示到固定标签业务场景:答题添加图片匹配题目一个选项一个题目
  上传
 77254  575

图片上传插件

图片上传插件
  上传
 87102  392

基于PhotoClip移动端上传图片裁剪

移动端上传图片裁剪插件简单版
  上传
 58291  460

讨论这个项目(245)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    佑逆 0
    2020/10/26 23:39:15
    真的LJ
        佑逆0
        2020/10/26 23:39:52
        文件过大就报错
    回复
    繁星 ?? 0
    2019/9/9 9:53:02
    看着不错 下了试试 回复
    在路上 0
    2019/6/4 19:12:45
    这个有bug啊 作者都不更新吗
        在路上0
        2019/6/4 19:13:27
        下载下来和演示的不一样啊,演示的就能用 ,下载下来居然还js报错
    回复
    雨夜 0
    2019/3/20 10:28:03
    这居然要人3积分,而且还文件缺失。也不能举报。什么破东西 回复
    ōóǒò 0
    2019/3/14 15:27:53
    就这玩意,要9块钱?还说别人官网收费? 回复
    relax_sometimes 0
    2018/11/12 14:31:14
    带来了更多问题,描述的倒是不错,你应该去当文案 回复
    王云龙-小旭音乐 0
    2018/8/28 17:41:41
    可以上传视频吗? 然后php的处理呢?
        ??张先生0
        2018/9/7 10:51:51
        搞定了吗?我也遇到这个问题
        扶摇九万里0
        2019/3/20 9:31:04
        是的
    回复
    万能的波哥 0
    2018/7/24 9:22:23
    php代码呢。我擦 我花了3个币 下载了不管。
        算了0
        2018/8/24 11:00:42
        不会吧。
    回复
    自渡 0


    下载下来根本没法用。

        哄着自己玩0
        2018/7/17 12:54:47
        自己写个php后台接收前端上传的文件处理一下就行了
        1808451930
        2019/4/14 16:26:55
        问题是作为前端初级者我还不会写啊
    回复
    Caster 0
    2018/6/8 15:51:32
    可以上传视频吗? 然后php的处理呢? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复