之前公司用的一直是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不支持的浏览器触发 |