本文是总结upload上传插件的问题。前段时间是用的swfupload.这两个其实差不多,提到上传,就会想到file标签。但是如果文件过大,或者多个文件的时候,这个html标签就有点力不从心了,下面主要讨论php后台来处理多线程上传工具。正因为自带标签的局限性,所以就有了今天的这个Uploadify这个插件的诞生。
uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。
首先去官网下载,//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' }); });