jQuery uploadify3.2 属性里没有cancelImg或cancelImage属性

最新推荐文章于 2021-02-24 12:14:25 发布

转载最新推荐文章于 2021-02-24 12:14:25 发布 · 509 阅读

文章标签：

#jquery

spring 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在使用jQuery uploadify插件时遇到的问题：如何正确设置取消图标的样式。通过分析uploadify.css文件和jQuery.uploadify.min.js源代码，发现取消图标样式直接在CSS中定义。作者修改了uploadify.css文件内的样式，成功实现了自定义取消图标。特别指出，uploadify3.2版本中，直接设置cancelImage或cancelImg属性无效，需通过CSS实现自定义。

关于jQuery uploadify插件的参考资料中，都提到了cancelImg属性或cancelImage属性，但自己试过都不成功。看到网上一篇文章，提到uploadify3.2的更新比较多，以前版本的参考资料对不上。

我先看了uploadify.css文件，看到.cancel这个class的background属性的确包含了图片样式，我就在jquery.uploadify.min.js直接搜索cancelimg,cancelimage,img,src这些词，硬是没找到相关的内容，后来搜索cancel才找到这个方法的内容

if(i.itemTemplate==false){i.itemTemplate='<div id="${fileID}" class="uploadify-queue-item"><div class="cancel"><a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a></div><span class="fileName">${fileName} (${fileSize})</span><span class="data"></span><div class="uploadify-progress"><div class="uploadify-progress-bar"><!--Progress Bar--></div></div></div>';}

看起来，这个图片样式貌似是直接在CSS里设置的。于是打开uploadify.css文件，直接修改了.uploadify-queue-item .cancel 这个class的background，改成这样“background: url('cancelitem.gif') 0 0 no-repeat;”（因为cancelitem.gif与CSS样式在同一个文件夹，所以这样写，如果不是同一个文件夹，你应该知道怎么弄）。

取消图标的样式终于出来了！

切记uploadify3.2在uploadify()方法中写cancelImage属性或者cancelImg属性没有任何效果，要直接设置CSS。