jquery uploadify使用总结

    最近一个项目中有要求实现文件夹上传，由于本项目使用了jQuery,本人也十分喜欢jQuery，故使用uploadify实现。官方有提供demo和文档，故不在这里细述。主要讲一下如何在同一页面使用多个上传控件。
     先说下我的项目中的要求。要求根据控件类型动态生成界面元素，包括文件上的上传。由此就出现了下面几个问题：
    一、由于该控件是以一id="uploadify"的控件为入口，所以如果存在多个就会有问题，如下所示:
   

$('uploadify').uploadify({...});

     为了解决该问题，我添加了多个name='uploadify'的控件，并且入口改成如下所示：
   

$("input[name='uploadify']").uploadify({...})

但问题并未得到完全解决，除了第一个控件正常显示样式，其它所有的上传控件并未显示“Browse”图片，让我很纳闷，怀疑过控件本身只支持一个(虽然$("input[name='uploadify']")是个数组，但只会处理第一个)，百思不得其解，后打开jquery.uploadify.v2.1.0.min.js文件，发现其中有下面一段代码：
  

     a(this).after('<div id="' +a(this).attr("id"+ 'Uploader"></div>');
     if(settings.queueID == false) {
        a("#" + a(this).attr("id") + "Uploader").after('<div id="' + a(this).attr("id")
   

   注意红色部分,是有取name='uploadfiy'的控件id，作为div的id.而之前我并没有给name='uploadfiy'加上id,故加上了id属性。问题等到解决。
   二。上传成功后如何将上传成功的文件名保存至对应的文本框以供保存和下载。
   由于name='uploadfiy'对应的是一组控件，故无法区分上传的文件对应的是哪个属性。
后经查看文档，得知
   

      onComplete: function (event, queueID, fileObj, response, data)
    

     这个方法的evnet参数中带有当前上传控件的id(即在第一点中添加的)，获取方式如为 event.currentTarget.id;故根据此获取得当前控件，并由该对象利用next()方法获得该控件对应的文本框，fileObj为上传的文件对象，fileObj.name为文件名。故解决该问题。

   
  

评论

1 楼 qqww12345 2011-11-22  

今天在做后台的时候为这个问题困扰了1天，非常非常非常感谢，顶你！