JQ实现fileupload控件样式的修改【聂梓晨吧】

聂梓晨吧关注：27贴子：362

5回复贴，共1页

JQ实现fileupload控件样式的修改

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jQueryFileStyle.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input class="file_1" type="file"/>
<script type="text/javascript">
$(function() {
$("input.file_1").filestyle({
image: "images/liu.jpg",
imageheight : 22,
imagewidth : 82,
width : 220
}); });
</script>
</div>
</form>
</body>
</html>

送TA礼物

IP属地:北京

1楼2013-04-27 10:08回复

/*
* Style File - jQuery plugin for styling file input elements
*
* Copyright (c) 2007-2008 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Based on work by Shaun Inman
* http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
*
* Revision: $Id: jquery.filestyle.js 303 2008-01-30 13:53:24Z tuupola $
*
*/ (function($) {
$.fn.filestyle = function(options) {
/* TODO: This should not override CSS. */
var settings = {
width : 250
};
if(options) {
$.extend(settings, options);
};
return this.each(function() {
var self = this;
var wrapper = $("<div>")
.css({
"width": settings.imagewidth + "px",
"height": settings.imageheight + "px",
"background": "url(" + settings.image + ") 0 0 no-repeat",
"background-position": "right",
"display": "inline",
"position": "absolute",
"overflow": "hidden"
});
var filename = $('<input class="file">')
.addClass($(self).attr("class"))
.css({
"display": "inline",
"width": settings.width + "px"
}); $(self).before(filename);
$(self).wrap(wrapper); $(self).css({
"position": "relative",
"height": settings.imageheight + "px",
"width": settings.width + "px",
"display": "inline",
"cursor": "pointer",
"opacity": "0.0"
}); if ($.browser.mozilla) {
if (/Win/.test(navigator.platform)) {
$(self).css("margin-left", "-142px");
} else {
$(self).css("margin-left", "-168px");
};
} else {
$(self).css("margin-left", settings.imagewidth - settings.width + "px");
}; $(self).bind("change", function() {
filename.val($(self).val());
});
});
};
})(jQuery);

IP属地:北京

2楼2013-04-27 10:09

收起回复

上面是HTML控件的样式设计下面是asp控件的样式设计
原理隐藏fileupload 让button激发fileupload的对话框- -给textbox 赋值。然后再通过确定按钮（另一个button）实现真正的上传！

IP属地:北京

3楼2013-04-27 11:00

<div class="v2cont">
<asp:TextBox ID="filename" runat="server"></asp:TextBox><asp:FileUpload ID="selectl" runat="server" CssClass="selectl" />
<input id="filebrowse" type="button" value="" onclick="fileup()"/>
<asp:Button ID="fileconfirm" runat="server" Text="确定" />
<a href="#">选择系统语言包</a>
</div>
<script type="text/javascript">
function fileup() {
$("#selectl").click();
$("#filename").val($("#selectl").val());
}
</script>

IP属地:北京

4楼2013-04-27 11:01