87,968
社区成员
发帖
与我相关
我的任务
分享（Jquery）Uploadify-v2.1.4的button改不了颜色
不得不说这个问题纠结了我好久了最初是想做一个这样的
添加和上传功能在一起，但是
Uploadify-v2.1.4的button默认颜色一直改不了，虽然我的其他功能都实习了，但是要设计的网页必须要用到这个颜色，尝试了很多方法，一直弄不出来，很纠结，试过hideButton隐藏按钮，CSS插入.uploadify-button {background:url(BG_button.PNG );}，都没效果
尝试弄了下swf但是显示丢失了好多控件，而且版本不符合，他是swf里还写了代码的。
http://download.csdn.net/detail/happyclank/4166126 Uploadify-v2.1.4的下载地址
用的是jquery-1.4.1.min.js
Html代码如下：
<head>
<title></title>
<link href="uploader/uploadify.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="uploader/swfobject.js" type="text/javascript"></script>
<script src="./js/jquery.uploadify.min.js" type="text/javascript"></script>
<script src="uploader/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function queryString(query) {
var search = window.location.search + '';
if (search.charAt(0) != '?') {
return undefined;
}
else {
search = search.replace('?', '').split('&');
for (var i = 0; i < search.length; i++) {
if (search[i].split('=')[0] == query) {
return decodeURI(search[i].split('=')[1]);
}
}
return undefined;
}
};
</script>
<script type="text/javascript">
$(document).ready(function () {
if (1==1) {
var flodCode = queryString("URI");
var URLOne=queryString("URI1");
$("#uploadify").uploadify({
'uploader': 'uploader/uploadify.swf',
'script': 'servlet/Upload',
'cancelImg': 'uploader/cancel.png',
'folder': 'upload',
'queueID': 'fileQueue',
'auto': true,
'method' : 'GET',
'multi': true,
'filesSelected': '4',
//'hideButton' : true,
'scriptData': {'URL1':'1','dirName':'1','ftpAddress':$("#ftp").val(),'userName':$("#username").val(),'pwd':$("#pwd").val()},
//'onAllComplete': function () { alert("21111111111"); },
onComplete: function(event, queueID, fileObj, response, data) {
//转换为json对象
var dataObj = eval("("+response+")");
alert(dataObj);
//saveFile(dataObj);
},
'onQueueComplete' : function(queueData) {
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
} ,
'onError': function () { alert("12"); }
});
}
else {
$("#Content").html("143");
}
});
function doUpload() {
// 上传方法
$.upload({
// 上传地址
url:window.basePath+'/reply/imageUpload',
// 文件域名字
fileName: 'uploadfile',
// 其他表单数据
params: {},
// 上传完成后, 返回json, text
dataType: 'json',
// 上传之前回调, return true表示可继续上传
onSend: function() { return true; },
onSubmit: function(){ },
// 上传之后回调
onComplate: function(data) {
if(data.msg){
}else{
alert("上传图片出错！"); } } });
}
</script>
</head>
<body>
<div id="Content">
<div id="fileQueue">
</div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">tijia111o</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()">quxiao</a>
</p>
<input type="hidden" id="ftp" value="127.0.0.1"/>
<input type="hidden" id="username" value="admin"/>
<input type="hidden" id="pwd" value="admin"/>
<form>
<input id="projectfile" name="file" type="file" value="111111" ></input>
</form>
</div>
</body>
...全文
请发表友善的回复…
发表回复
彼端的羽翼 2015-07-31
- 打赏
- 举报
昨天弄了下，终于把3.2弄上了，但是只有按钮的颜色效果，点击却没反应，也不会显示鼠标移动到按钮上一只手的样式，
jquery.uploadify.v2.1.4.min.js 如果代替放进去就可以实现上传，但是不能改背景色，用3.2的js可以改背景色，但是没有上传····
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Put your options here
});
});
function queryString(query) {
var search = window.location.search + '';
if (search.charAt(0) != '?') {
return undefined;
}
else {
search = search.replace('?', '').split('&');
for (var i = 0; i < search.length; i++) {
if (search[i].split('=')[0] == query) {
return decodeURI(search[i].split('=')[1]);
}
}
return undefined;
}
};
</script>
<script type="text/javascript">
$(document).ready(function () {
if (1==1) {
var flodCode = queryString("URI");
var URLOne=queryString("URI1");
$("#uploadify").uploadify({
'uploader': 'uploader/uploadify.swf',
'script': 'servlet/Upload',
'cancelImg': 'uploader/cancel.png',
'folder': 'upload',
'queueID': 'fileQueue',
'auto': true,
'method' : 'GET',
'multi': true,
'filesSelected': '4',
' height': '30',
//设置按钮的高度(单位px)，默认为30.(不要在值里写上单位，并且要求一个整数，width也一样)
'width':' 100',
hideButton :'true',
auto :'true',
//接受true or false两个值，当为true时选择文件后会自动上传；为false时只会把选择的文件增加进队列但不会上传，这时只能使用upload的方法触发上传。不设置auto时默认为true
buttonClass: "some-class",
//设置上传按钮的class
buttonCursor: 'hand',
//'buttonImage' : 'py_images/py_botton_2.png ',
//设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)
buttonText: '选 择',
//设置按钮文字。值会被当作html渲染，所以也可以包含html标签
checkExisting: '/uploadify/check-exists.php',
//接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1，不存在时返回0(应该主要是作为后台的判断吧)，默认为false
debug: false,
'scriptData': {'URL1':'1','dirName':'1','ftpAddress':$("#ftp").val(),'userName':$("#username").val(),'pwd':$("#pwd").val()},
//'onAllComplete': function () { alert("21111111111"); },
onComplete: function(event, queueID, fileObj, response, data) {
//转换为json对象
var dataObj = eval("("+response+")");
alert(dataObj);
//saveFile(dataObj);
},
'onQueueComplete' : function(queueData) {
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
} ,
'onError': function () { alert("12"); }
});
}
else {
$("#Content").html("143");
}
});
function doUpload() {
// 上传方法
$.upload({
// 上传地址
url:window.basePath+'/reply/imageUpload',
// 文件域名字
fileName: 'uploadfile',
// 其他表单数据
params: {},
// 上传完成后, 返回json, text
dataType: 'json',
// 上传之前回调, return true表示可继续上传
onSend: function() { return true; },
onSubmit: function(){ },
// 上传之后回调
onComplate: function(data) {
if(data.msg){
}else{
alert("上传图片出错！"); } } });
}
</script>
<div class="top_button">
<div id="fileQueue">
</div>
<input type="file" name="uploadify" id="uploadify" />
</div>
</div>
彼端的羽翼 2015-07-31
- 打赏
- 举报
算了。自己搞定了彼端的羽翼 2015-07-31
- 打赏
- 举报
现在自己摸索着把东西弄的差不多了，想问下后面进度条的长度怎么改。。。
/*
Uploadify
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
.uploadify {
position: relative;
margin-bottom: 1em;
}
.uploadify-button {
background-color: #1a46ac;
background-image: linear-gradient(bottom, #1a46ac 0%, #2f7ec6 100%);
background-image: -o-linear-gradient(bottom, #1a46ac 0%, #2f7ec6 100%);
background-image: -moz-linear-gradient(bottom, #1a46ac 0%, #2f7ec6 100%);
background-image: -webkit-linear-gradient(bottom, #1a46ac 0%, #2f7ec6 100%);
background-image: -ms-linear-gradient(bottom, #1a46ac 0%, #2f7ec6 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #1a46ac),
color-stop(1, #2f7ec6)
);
background-position: center top;
background-repeat: no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #173a59;
color: #FFF;
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
width: 100%;
}
.uploadify:hover .uploadify-button {
background-color: #1b4ec2;
background-image: linear-gradient(top, #1b4ec2 0%, #358bda 100%);
background-image: -o-linear-gradient(top, #1b4ec2 0%, #358bda 100%);
background-image: -moz-linear-gradient(top, #1b4ec2 0%, #358bda 100%);
background-image: -webkit-linear-gradient(top, #1b4ec2 0%, #358bda 100%);
background-image: -ms-linear-gradient(top, #1b4ec2 0%, #358bda 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #1b4ec2),
color-stop(1, #358bda)
);
background-position: center bottom;
}
.uploadify-button.disabled {
background-color: #D0D0D0;
color: #808080;
}
.uploadify-queue {
margin-bottom: 1em;
width:1000px;
}
.uploadify-queue-item {
background-color: #F5F5F5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font: 11px Verdana, Geneva, sans-serif;
margin-top: 1px;
max-width: 350px;
padding: 0px;
}
.uploadify-error {
background-color: #FDE5DD !important;
}
.uploadify-queue-item .cancel a {
background: url('../img/uploadify-cancel.png') 0 0 no-repeat;
float: right;
height: 16px;
text-indent: -9999px;
width: 16px;
}
.uploadify-queue-item.completed {
background-color: #fafafa;
}
.uploadify-progress-bar {
background-color: #3dca7f;
height: 3px;
width: 1px;
}
斯洛文尼亚旅游 2015-07-30
- 打赏
- 举报
3.2你只需要在uploadify.css下重写这2个样式就可以:hover是鼠标移动上去的样式。
下面的示例是绿色背景白色字，你要什么样的自己修改
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style>
.uploadify-button{background:green;color:#fff}
.uploadify:hover .uploadify-button{background:transparent;color:red}
</style>彼端的羽翼 2015-07-30
- 打赏
- 举报
我下了3.2的，但是具体配置哪些不怎么会，因为之前的2.1也是其他帮忙配置的
斯洛文尼亚旅游 2015-07-30
- 打赏
- 举报
你版本太低了，没有配置可以修改显示的样式。。只能设置buttonImg（图片）和buttonText（显示的文字）
你用做成那个样子，自己弄张图片，配置buttonImg设置好图片路径
换3.2的，可以自己定义按钮显示样式
你用做成那个样子，自己弄张图片，配置buttonImg设置好图片路径
换3.2的，可以自己定义按钮显示样式
彼端的羽翼 2015-07-30
- 打赏
- 举报
跪求大神
