当前位置:编程学习 > JS >>

jquery跨浏览器 file上传控件

 代码如下 复制代码

(function($) {
    $.fn.fileEveryWhere = function(options) {
        var defaults = {
            WrapWidth: 300,
            WrapHeight: 30,
            ButtonWidth: 60,
            ButtonHeight: 28,
            ButtonText: "浏览",
            TextHeight: 28,
            TextWidth: 240
        };
        var options = $.extend(defaults, options);
        var browser_ver = $.browser.version.substr(0, 1);
        var displayMode = ($.browser.msie && browser_ver <= "7") ? "inline" : "inline-block";
        return this.each(function() {
            //创建包含,设置为相对定位
            var wrapper = $("<div class='fileWraper'>")
                            .css({
                                "width": options.WrapWidth + "px",
                                "height": options.WrapHeight + "px",
                                "display": displayMode,
                                "zoom": "1",
                                "position": "relative",
                                "overflow": "hidden",
                                "z-index":"1"
                            });
            //创建文本输入框,用于存放上传文件名称
            var text = $('<input class="filename" type="text" />')
                             .css({
                                 "width": options.TextWidth + "px",
                                 "heigth": options.TextHeight + "px"
                             });
            //创建浏览按钮
            var button = $('<input class="btnfile" type="button" />')
                            .val(options.ButtonText);
            $(this).wrap(wrapper).parent().append(text, button);
            $(this).css({
                "position": "absolute",
                "top": "0",
                "left": "0",
                "z-index": "2",
                "height": options.WrapHeight + "px",
                "width": options.WrapWidth + "px",
                "cursor": "pointer",
                "opacity": "0.0",
                "outline":"0",
                "filter": "alpha(opacity:0)"
            });
            if ($.browser.mozilla) { $(this).attr("size", 1 + (options.WrapWidth - 85) / 6.5) }
            $(this).bind("change", function() {
                text.val($(this).val());
            });
        });
    };
})(jQuery);

使用很简单:

 $("input:file").fileEveryWhere({参数});

 

firefox对type="file" 的input的width定义目前是不支持的,但是FF支持size属性,可以给size设置一个值,来控制上传框的大小。
但是这个size值怎么设置,size="10"是多宽,默认值又是多少

 代码如下 复制代码
<script type="text/javascript">
        $(function() {
            var fileArray = [];
            var i = 0;
            while (i < 100) {
                fileArray.push(i + ":<input type='file' size='" + i + "' /><br />");
                i++;
            }
            document.write(fileArray.join(""));
            $("input:file").each(function() { $(this).after("<b>" + $(this).width() + "</b>") });
           });
    </script>

发现了一定的规律,默认为208像素,size="1"时为85像素,每个size之间相差6.5个像素的宽度,所以我们可以动态的设定size的值,如:

 代码如下 复制代码

 if ($.browser.mozilla) { $(this).attr("size", 1 + (options.WrapWidth - 85) / 6.5)

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,