uploadify3.2 多图上传 缩略图上传 实例源文件
$(function() {
$('#IFY-list').uploadify({
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},

//'checkExisting':'style/uploadify/check-exists.php',//检查重复性
'swf' : 'uploadify.swf',//swf文件路径
'uploader' : 'uploadify.php',//服务器端脚本文件路径

'fileObjName': 'Filedata',//上传附件$_FILE标识
'fileSizeLimit': '5MB',//上传附件大小,0不限制,5120B/512KB/2MB/1GB
'fileTypeDesc': '支持的格式:*.jpg;*.jpge;*.gif;*.png',
'fileTypeExts': '*.jpg;*.jpge;*.gif;*.png',//上传附件后缀限制,*.*不限制

'auto':true, //开启,自动上传
'multi' : true, //开启,多选文件
'uploadLimit' : 0, //允许上传文件个数

//'buttonClass':'btn tcenter',
'buttonText':'附件上传',
//'buttonImage':'',
'width':'120',
'height':'24',
'buttonCursor':'hand',

//'debug' : true,//开启调试模式

'queueID':'IFY-list-queue',//上传队列容器
'queueSizeLimit':10,//上传队列长度
//'progressData':'speed',//上传进度条样式
'removeCompleted': false ,//上传完成移除
//'removeTimeout': 0,//移除的延迟时间
'itemTemplate':'<div id="${fileID}" class="uploadify-queue-item">\
<a class="cancel" href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">删除</a>\
<p class="data"></p>\
<p class="fileName">${fileName}</p>\
</div>',

'overrideEvents': ['onUploadSuccess'],//可以被用户自定义事件覆盖
'preventCaching':true,//后缀加随机数,防止缓存
'requeueErrors':true,//上传出现错误后,重新加入队列
'successTimeout':30,//等待服务器响应时间,超过30秒认为上传完成

//没有兼容的FLASH时触发
'onFallback':function(){
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
},
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
console.log(file);
//有时候上传进度什么想自己个性化控制,可以利用这个方法
//使用方法见官方说明
},
选择上传文件后调用
'onSelect' : function(file) {},
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#IFY_one').uploadify('settings','queueSizeLimit')+"个文件!");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#IFY_one').uploadify('settings','fileSizeLimit')+"大小!");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常!");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确!");
break;
}
},

//上传文件成功后触发(每一个文件都触发一次)
'onUploadSuccess': function (file, data, response) {
var img='<img src="'+data+'" width="100" height="100" /><input type="hidden" name="images[]" value="'+data+'" readonly />';
$('#' + file.id).find('.data').html(img);
console.log(file);
console.log(data);
console.log(response);
},
});
});中文手册地址:http://slabs.sinaapp.com/uploadifydoc/

内置wei-reset CSS重置样式 有时间可以详细看下 谢谢
BY:悠悠山雨

附件 uploadify.zip ( 112.26 KB 下载:1040 次 )

评论() 相关

收藏

赞

wf9100

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。