uploadifive不用flash上传图片插件，基于h5和jQuery上传图片插件

之前公司用的一直是uploadify，基于flash的，随着flash的淘汰，好多浏览器已经屏蔽flash了，谷歌的，就连最近的win10也弃掉了flash，所以为了更好的用户体验改用uploadifive，移动端也可以使用，好了，话不多说下面就是整理的代码demo。

<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script type="text/javascript" src="__STATIC__/uploadifive/jquery.uploadifive.min.js"></script>
<div class="controls">

</div>

<?php $timestamp = time();?> $(function() {

$('#upload_picture_{$field.name}').uploadifive({

'auto' : true,//是否是自动上传，默认是true

'uploadScript' : "{:U('uploadPicture'))}",//上传地址

'fileObjName' : 'download',

'buttonText' : '上传照片',

'queueID' : 'queue',//进度条id

'fileType' : 'image/*',//上传文件类型

'multi' : false,//允许多个文件上传

'fileSizeLimit' : 5242880, 'uploadLimit' : 1,//一次可以上传的最大文件数

'queueSizeLimit' : 1,//允许队列中存在的最大文件数

上传成功后调用
'onUploadComplete' : function(file, data) {
var obj = JSON.parse(data);
if (obj.img == "500") {
alert("系统异常！");
} else {
$("#cover_id_{$field.name}").val(obj.id);
src = obj.url || '__ROOT__' + obj.path
$("#cover_id_{$field.name}").parent().find('.upload-img-box').html(
'<div class="upload-pre-item"><img src="' + src + '"/></div>'
);
document.getElementById("submit").disabled = false;
}
},
//取消上传调用
onCancel : function(file) {
$("#cover_id_{$field.name}").val("");
/* 注意：取消后应重新设置uploadLimit */
$data = $(this).data('uploadifive'),
settings = $data.settings;
settings.uploadLimit++;
alert(file.name + " 已取消上传~!");
},
//h5 API不支持的浏览器触发
onFallback : function() {
alert("该浏览器无法使用!");
},
//开始上传队列时触发
onUpload : function(file) {
document.getElementById("submit").disabled = true;//当开始上传文件，要防止上传未完成而表单被提交
},

});
});
</script>

这是参数的属性和作用：

属性	作用
auto	是否自动上传，默认true
uploadScript	上传路径
fileObjName	file文件对象名称
buttonText	上传按钮显示文本
queueID	进度条的显示位置
fileType	上传文件类型
multi	是否允许多个文件上传，默认为true
fileSizeLimit	允许文件上传的最大尺寸
uploadLimit	一次可以上传的最大文件数
queueSizeLimit	允许队列中存在的最大文件数
removeCompleted	隐藏完成上传的文件，默认为false
方法	作用
onUploadComplete	文件上传成功后执行
onCancel	文件被删除时触发
onUpload	开始上传队列时触发
onFallback	HTML5 API不支持的浏览器触发

uploadifive不用flash上传图片插件，基于h5和jQuery上传图片插件相关推荐

html 可编辑表格插件,基于Bootstrap的jquery可编辑表格插件Bootstable
插件描述:Bootstable是一款基于Bootstrap的jquery表格编辑插件.通过该jquery表格编辑插件,会自动为表格添加编辑和删除按钮,使表格可以动态编辑. 更新时间:2019-11-2 ...
html5下拉幻灯片插件,强大实用的jQuery幻灯片插件Owl Carousel
强大实用的jQuery幻灯片插件Owl Carousel 分类:代码日期:2017-04-11 点击(199,155) 下载(1) 来源:未知收藏简介 Owl Carousel 是一个强大.实用 ...
html toast 插件,基于Bootstrap4的Toast提示插件
这是一款基于bootstrap4的toast插件.该插件能非常方便的生成toast提示效果,不需要编写额外的html代码,非常实用. 使用方法在页面中引入下面的文件. 初始化插件通过下面的方法来创 ...
基于Bootstrap的jQuery开关按钮插件
按钮下载使用方法首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...
树形图html插件,前端树形图 -- zTree -- jQuery 树插件
zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).所 ...
【转】4.2使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录-- 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是今天我想介绍的是一款jQuery的插件:Jquery.form. ...
jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
jQuery 表格插件
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
转:jQuery常用插件
原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome 上传时间:2014-06-1 ...

uploadifive不用flash上传图片插件，基于h5和jQuery上传图片插件

uploadifive不用flash上传图片插件，基于h5和jQuery上传图片插件相关推荐

最新文章

热门文章