Uploadify的用法

从Uploadify 的下载页面上,可以看到当前的版本已经是Uploadify-v3.0.0 (Beta),但是还是一个Beta版,所以目前来说网站上的文档主要是针对 uploadify v2.14 的。所以这里就不多介绍老版本的文档了,主要说一下Uploadify3.0 的一些用法。

Uploadify 的v3.0 和老版本还是有很大的差别的,虽然从演示上来看基本上一样,但是jquery调用uploadify的时候,一些很重要的参数名字都变了。在演示上的差 别,老版本是把按钮的样式放在flash里,而v3.0把按钮的样式和flash 分开了,定义起来更加自由。

下面来说一下v3.0 的使用方法和有哪些参数上变化:

使用方法:


<html>
<head>
<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/uploadify/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.php',
'swf' : '/uploadify/uploadify.swf',
'cancelImage' : '/uploadify/uploadify-cancel.png',
'auto' : true
});
});
</script>
</head>
<body>
<input id="file_upload" name="file_upload" type="file" />
</body>
</html>

在页面中首先要uploadify 依赖的两个js 库:jquery 和 swfobject, 然后再加入从网上下载的 jquery.uploadify.js。 到目前为止,准备工作已经就绪,下面开始使用 jQuery.uploadify() 函数。传入指定的参数后,uploadify 就会按照你的要求来工作了。

UPLOADIFY V3.0的参数详解

下面的参数参数是必须的,当然插件也已经给他们赋上了必要的默认值

id       : jQuery(this).attr('id'), // 根据页面上绑定的对象来给uploadify设置id
swf      : 'uploadify.swf', // uploadify的上传功能是通过flash 来实现的,swf 是用来设置这个flash 的位置,这个flash 可以在下载的插件包里找到
uploader : 'uploadify.php', // 这个参数是当文件上传完以后调用的PHP代码的地址

下面的参数是可选的
// Options
auto : false,    // 设置选完文件是否自动上传
buttonClass     : '', // 可以为按钮自定义样式
buttonCursor    : 'hand', // 设置档鼠标移动到flash 上显示的图标
buttonImage     : '1111.jpg', // 设置按钮的图片
buttonText      : 'SELECT FILES', // 设置按钮上显示的文本
cancelImage     : 'uploadify-cancel.png', // 设置取消按钮的图片
checkExisting   : 'uploadify-check-existing.php', // 检查上传的文件时候已经存在
debug           : false, // uploadify de调试程序是否开启
fileObjName     : 'Filedata',
fileSizeLimit   : 0, // 设置文件的上传的大小,0为无穷大
fileTypeDesc    : 'All Files (*.*)',
fileTypeExts    : '*.*', // 设置文件上传时的文件类型
height          : 30, // 设置flash 的高度
method          : 'post', // 设置提交的方法
multi           : false, // 是否支付多文件一起上传
queueID         : false, //
queueSizeLimit  : 999,
removeCompleted : true,
removeTimeout   : 3,
requeueErrors   : false,
postData        : {}, // 设置上传是需要传入的参数
preventCaching  : true,
progressData    : 'percentage',
// simUploadLimit  : 1, // Not possible with swfUpload
successTimeout  : 30,
transparent     : true,
uploadLimit     : 999,
uploaderType    : 'html5', // the other option is 'flash' // 设置上传组件的类型
width           : 120, // 设置flash 的高度

'onSelect': function(file)  
        {  
        alert(file.name+"---"+file.id);  
        },// 选择文件时触发的方法
        
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
        },//上传出错后的方法
        
        'onUploadSuccess' : function(file, data, response) {
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
        },//上传成功后的方法

posted @ 2013-03-04 12:32  锐洋智能  阅读(6851)  评论(0编辑  收藏  举报