Question

我在我的网站周围使用jQuery UI，我想知道如何使用上传按钮的样式而不是标准的灰色uploadify按钮。

JavaScript的：

<script type="text/javascript">
$(document).ready(function() {
        $("button").button();
        $("input:button").button();
        $("#file_upload").button();

  $('#file_upload').uploadify({
    'uploader'  : 'files/uploadify.swf',
    'script'    : 'files/uploadify.php',
    'cancelImg' : 'files/cancel.png',
    'folder'    : 'uploads/',
    'auto'      : false,
    'multi'     : true,
    'buttonText'  : 'Choose Pictures',
    'onAllComplete' : function(event,data) {
      alert(data.filesUploaded + ' files uploaded successfully!');
    },
    'hideButton'  : true
  });
});
</script>

HTML：

<form id="upload_images" name="form1" action="">
<input type="file" id="file_upload" name="file_upload" />
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
</form>

这可能吗？我尝试使用buttonimg选项，但似乎没有很好的结果，因为我在“按钮”上看不到任何文字。正如你在下面看到的，我也在尝试hidebutton选项，但这只是隐藏了灰色按钮。有任何想法吗？

Answer 1

我更改了Uploadify的灰色按钮样式。我刚刚添加了以下内容：

'buttonImg': 'images/create_album.png',
'width': '273',
'height': '51',
'wmode': 'transparent',

完整代码：

$(document).ready(function () {
        $("#<%=FileUpload1.ClientID%>").uploadify({
            'uploader': 'scripts/uploadify.swf',
            'script': 'Upload.ashx',
            'cancelImg': 'images/cancel.png',
            'buttonImg': 'images/create_album.png',
            'width': '273',
            'height': '51',
            'wmode': 'transparent',
            'folder': 'uploads',
            'multi': true,
            'auto': true,
            'onAllComplete': function (event, queueID, fileObj, response, data) {                    
            }
        });

    });

Answer 2

下载软件包Uploadify后，似乎灰色按钮是使用Adobe Flash实现的。如果你尝试检查Firebug中的按钮，你会发现它是一个嵌入式flash对象。

抱歉，不要认为您的问题有任何解决方案。

如何将自己的样式应用于uploadify灰色渐变按钮？

2 个答案: