uploadify的试用方法总结

本文是总结upload上传插件的问题。前段时间是用的swfupload.这两个其实差不多,提到上传,就会想到file标签。但是如果文件过大,或者多个文件的时候,这个html标签就有点力不从心了,下面主要讨论php后台来处理多线程上传工具。正因为自带标签的局限性,所以就有了今天的这个Uploadify这个插件的诞生。

uploadfiy这个插件是基于js里面的jquery库写的。结合了ajaxflash,实现了这个多线程上传的功能。

首先去官网下载,//www.uploadify.com/download/ ,这是官方下载地址,我用的是最新版本3.2.1。现在百度上的有关介绍,手册翻译大部分都是比较老的版本。有些属性,和属性的写法是根本不一样的。我先简单说几个我用到的,和以前版本不一样的;

1.scriptData  最新版本为:•formData  :选项允许你在上传期间向后台脚本发送额外的数据。你可以在后台脚本中调用scriptData的值,就像调用表单提交的数据一样。(比如:$_POST[‘scriptDataVariable’])。如果要发送动态数据,你可以将此选项与.uploadifySettings()方法一起配合使用。

Js代码:


$(function() {

$("#file_upload").uploadify({

'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},  //'someKey' ,<span style="font-family: 宋体;">传过去的名称</span>'someValue'为其值,可以指定ID<span style="font-family: 宋体;">从</span><span style="font-family: 'Times New Roman';">html</span><span style="font-family: 宋体;">里获取</span>

'swf'           : '/uploadify/uploadify.swf',

'uploader'      : '/uploadify/uploadify.php',

'onUploadStart' : function(file) {           //<span style="font-family: 宋体;">这是一个回调方法</span>

$("#file_upload").uploadify("settings", "someOtherKey", 2);

}

});

});

<input type="file" name="file_upload" id="file_upload" />

在使用的用,以上是在初始化的时候就把值穿过去的,想要在用户填写之后再传值,可以用•settings 设定formData进行传值;

例: $(“#file_upload_package”).uploadify(‘settings’, ‘formData’, {‘productid’ : data});

setTimeout(“$(‘#file_upload_package’).uploadify(‘upload’, ‘*’)”,1000);

2. •fileTypeDesc 、•fileTypeExts ( fileDesc)、(fileExt)分别为在浏览窗口底部的文件类型下拉菜单中显示的文本、允许上传的文件后缀。【译者注:.jpg/.png等】

Js:需要注意的是,fileTypeExts在写属性的时候是分号隔开,以前是用的逗号。


$(function() {

$("#file_upload").uploadify({

'fileTypeDesc' : 'Image Files',

'fileTypeExts' : '*.gif; *.jpg; *.png',

'swf'          : '/uploadify/uploadify.swf',

'uploader'     : '/uploadify/uploadify.php'

});

});

3.调试的时候跟swfupload差不多,可以用debug属性设为true就有个专门一个框进行调试。


$(function() {

$("#file_upload").uploadify({

'debug'    : true,

'swf'      : '/uploadify/uploadify.swf',

'uploader' : '/uploadify/uploadify.php'

});

});

发表评论

Close Menu