之前公司用的一直是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 id="queue"></div>
<!--上传按钮-->
<input id="upload_picture_{$field.name}" name="{$field.name}" type="file" multiple="true">
<!--真正的input值-->
<input type="hidden" name="{$field.name}" id="cover_id_{$field.name}" value="{$data[$field['name']]}"/>
<!--成功后图片显示框-->
<div class="upload-img-box">
<notempty name="data[$field['name']]">
<div class="upload-pre-item">
<img src="__ROOT__{$data[$field['name']]|get_cover='path'}"/></div> </notempty> </div>
</div>
<script type="text/javascript">
<?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不支持的浏览器触发 |