uploadify使用笔记

2012-03-09 16:53 呦菜阅读(716) 评论(0) 编辑收藏举报

先小感慨一下：刚刚一看，发现好多天没写文章了，真的很多天，自己也没意识到，时间飞逝啊~~

uploadify是一个文件上传的很好用的插件，以前在做建筑项目的时候用过，但是时间久了就忘光光了，这次项目中又用到了，所以记下些笔记，免得以后又忘记~~

这是我写的一段代码：　　

$("#"+boxid).uploadify({
        'uploader'   : 'exten/admin/template/uploadify/uploadify.swf',
        'script'     : 'admin.php?act=asyncUploadImage',
        'cancelImg'  : 'exten/admin/template/uploadify/cancel.png',
        'buttonImg ' :'/exten/admin/template/uploadify/uploadfy.png',
        'scriptData' : {'PHPSESSID':phpsessid},
        'hideButton ':false,
        'width'      : 77, 
        'height'     : 33,     
        'auto'       : true,
        'multi'      : false,
        'fileExt'    : '*.jpg;*.gif;*.png',
        'fileDesc'   : 'Web Image Files (.JPG, .GIF, .PNG)',
        'wmode'      : 'transparent',
        'hideButton' : true,
        'onComplete' : function(event, ID, fileObj, response, data) {
            var json_data=eval("("+response+")");
            $("#"+photoBoxId).attr("src",json_data.data.url);
            $("#"+boxid).siblings(".oldSrc").attr("value",json_data.data.url);
        }
    });

首先要说的是，此插件必须在服务器上使用，本地是不行的，下面来说说我在使用过程中出现的问题：

1. http error问题

这个问题属于本身代码问题，刚开始是自己的 'script' 属性的值不是正确的接口，其次是后台出现了bug，导致文件无法上传，这个就不说了，但是注意在使用的时候最好要后台返回一下数据，才能知道问题出现在哪里了~~~

2. 按钮图片

就是浏览文件的按钮，刚开始的时候按钮是这样的：，当然，原版的uploadify插件按钮是不能输入中文的，如果实在想输入中文的话可以修改插件主要是uploadify。js和。swf文件，修改的地方不是很麻烦，可以一试。

接下来说说buttonImg这个属性，这个是给浏览按钮添加图片，但是不知道为什么，我的图片总是没有设置成功过，不知道有没有人遇到和我一样的问题。

那么就来说说下一种方法，是我推荐的方法，也是我设置按钮图片唯一成功的方法：

先看下效果图：

看一下刚开始贴出的一段代码，有这样一段代码：

'wmode' : 'transparent',
'hideButton' : true,

这就是关键所在，使原来默认的按钮隐藏，然后再添加以下css代码：object{ background:url(../images/images/uploadfy.png) no-repeat;}即为生成的object添加一个背景图片，这样就大功告成了。注意：三者缺一不可

3. 参数传递

因为上一次项目中上传的时候ie可以上传成功的时候火狐总是上传不成功，一直没有找到原因，这次项目中说是后台的原因，需要我们在上传的时候传递一个参数——PHPSESSID

传递参数的时候就需要

'scriptData' : {'PHPSESSID':phpsessid},

呦菜努力，让自己不断进步！