jquery uploadify动态传递参数如何实现

我们在开发工作当中，难免会用到文件上传，那么实现ajax文件上传目前比较流行的插件是uploadify，它是一个很好用而且功能很强大的插件。今天在公司当中，同事问起我关于如何实现uploadfy动态绑定参数提交到后台的问题，其实这个问题并不是很难，但是在网络上很难找到正确的答案，就连官网里的文档也存在差异！那么今天我写了一个例子，把如何实现动态绑定参数的过程详细作一个介绍。希望能帮到那些正在为之努力的朋友们。

工具/原料

• 在官网下载插件

方法/步骤

1. 下载好的目录结构如图所示，并把它放在你的webRoot下面

   

   
2. 在webRoot下面建好你的页面,把uploadfy的初使化配置写在script标签当中，并且要在页面加载完过后就执行。如图所示：

   
3. 具体配置代码如下：（图略，可直接复制使用）

   <script type="text/javascript">$(document).ready(function() {    $("#uploadify").uploadify({        //开启调试        'debug' : false,        //是否自动上传        'auto':false,        //超时时间        'successTimeout':99999,        //附带值       /*  'formData':{            'userid':'用户id',            'username':'用户名',            'rnd':'加密密文'        }, */        //flash        'swf': "uploadify/uploadify.swf",        //不执行默认的onSelect事件       // 'overrideEvents' : ['onDialogClose'],        //文件选择后的容器ID        'queueID':'uploadfileQueue',        //服务器端脚本使用的文件对象的名称 $_FILES个['upload']        'fileObjName':'upload',        //上传处理程序        'uploader':'${pageContext.request.contextPath}/upload.do',        //浏览按钮的背景图片路径        //'buttonImage':'upbutton.gif',        //浏览按钮的宽度        'width':'80',        //浏览按钮的高度        'height':'32',        //expressInstall.swf文件的路径。        'expressInstall':'uploadify/expressInstall.swf',        //在浏览窗口底部的文件类型下拉菜单中显示的文本        'fileTypeDesc':'支持的格式：',        //允许上传的文件后缀        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.*',        //上传文件的大小限制        'fileSizeLimit':'1MB',        //上传数量        'queueSizeLimit' : 1,        //每次更新上载的文件的进展        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {             //有时候上传进度什么想自己个性化控制，可以利用这个方法             //使用方法见官方说明        },        //选择上传文件后调用        'onSelect' : function(file) {        },        //返回一个错误，选择文件的时候触发        'onSelectError':function(file, errorCode, errorMsg){            switch(errorCode) {                case -100:                    alert("上传的文件数量已经超出系统限制的"+$('#uploadify').uploadify('settings','queueSizeLimit')+"个文件！");                    break;                case -110:                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadify').uploadify('settings','fileSizeLimit')+"大小！");                    break;                case -120:                    alert("文件 ["+file.name+"] 大小异常！");                    break;                case -130:                    alert("文件 ["+file.name+"] 类型不正确！");                    break;            }        },        //检测FLASH失败调用        'onFallback':function(){            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");        },        //上传到服务器，服务器返回相应信息到data里        'onUploadSuccess':function(file, data, response){            alert(data+"哈哈哈哈");        },        'onUploadStart':function(file){            var element = {};            element.one = $("#one").val();            element.two = $("#two").val();            element.three = $("#three").val();            element.four = $("#four").val();            $('#uploadify').uploadify('settings','formData',element);                                }    });});</script>

   html简单示例（如图）

   
4. 参数简单介绍(最重要的几个参数)：

   uploader：指向你后台的地址

   fileObjName:指定你后台用哪一个参数名来获取“文件”

   onUploadStart:当开始上传时执行的函数 ，我们等一下要讲的动态绑定就是要写在里面，意思是说，在提交之前我们把数据获取后，同时提交到后台。

   .....

   

   

   
5. 重中之重，如何启动动态绑定，官网是这样说的(如图)

   
6. 纠正，官网的这种方式，是传一个参数的情况。而我们要使用的方式是：整个对象作为动态参数传到后台，你应该这样写（如图：）

   
7. 代码指导：

   $('#uploadify').uploadify('settings','formData',element);

   element就是你要传递的对象，而formData会去得写你的formData函数。所以这里要用formData来传递。

   END

注意事项

• 后台的获取的时候要注意你配置的是什么名字就用什么获取。（如果需要转换request最好在转换之前获取参数）
• 关于其它参数可以到官网看一下。如果需要案例全源码，可以留言。
• 如果你喜欢小蝶的文字，请给我投票额
• 原文：http://jingyan.baidu.com/article/a3a3f8118b1c4d8da3eb8a60.html