`
齐晓威_518
  • 浏览: 618105 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

jQuery改变file文件上传控件”浏览“按钮样式

 
阅读更多
开始配置

在页面上引入jQuery核心库和jQuery File Style插件库。
<script src="jquery-1.4.1.min.js" kesrc="jquery-1.4.1.min.js" type="text/javascript">script>
<script src="jquery.filestyle.js" kesrc="jquery.filestyle.js" type="text/javascript">script>
在页面中放入需要改变样式的file文件上传控件。

<form action="#" class="FileForm"><h1>改变样式后的file文件选择框h1>

<input class="file_1" type="file">
</form>

初始化脚本,开始改变控件的样式。

$(function() {

      $("input.file_1").filestyle({ 

          image: "choose-file.gif",

          imageheight : 22,

          imagewidth : 82,

          width : 220

      }); 

});
这样,我们就改变了文件上传控件按钮的样式,效果如下图所示:
分享到:
评论

相关推荐

    jquery 文件批量上传控件

    这个控件的核心是valums-file-uploader,其源代码包名为valums-file-uploader-b3b20b1,包含了实现文件批量上传所需的所有资源,如JavaScript文件、CSS样式表和示例HTML页面。 二、核心功能 1. **多文件选择**:...

    jquery封装的input file控件

    "jquery封装的input file控件"是一种解决方法,通过jQuery库来改进文件上传控件的外观和交互体验。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在本案例中,开发者...

    jquery上传文件插件filestyle

    **jQuery Filestyle插件**是一种简洁高效的文件上传组件,它为网页中的文件上传功能提供了美观且用户友好的界面。这个插件充分利用了流行的JavaScript库jQuery的强大功能,简化了开发人员在网页设计中实现文件上传...

    JQuery uploadify文件上传控件

    **jQuery Uploadify 文件上传控件详解** 在网页开发中,文件上传功能是非常常见且重要的一个环节。jQuery Uploadify是一款高效、易用的jQuery插件,它使得文件上传变得更加直观和用户体验友好。本篇文章将深入探讨...

    ASP.NET jquery.uploadify文件上传控件测试项目(已解决中文乱码)

    - `jquery.uploadify.css`:样式文件,定义了上传按钮和进度条的外观。 - 示例HTML页面:展示如何在页面上集成uploadify控件。 - 示例ASP.NET控制器或HTTPHandler:处理文件上传请求的代码。 - 配置文件或示例代码:...

    Bootstrap样式文件上传jquery插件

    Bootstrap样式文件上传jQuery插件是前端开发者在构建交互式网页时常常使用的工具,尤其是对于需要用户上传文件的场景。这款插件,名为bootstrap-filestyle,是专门为Bootstrap框架设计的,目的是提升文件输入框的...

    web自定义文件上传控件

    在HTML中,`&lt;input type="file"&gt;`元素是默认的文件上传控件,但它的样式和功能有限。为了自定义,我们可以使用CSS来改变其外观,例如设置边框、背景色、字体等,甚至可以利用绝对定位隐藏原始的文件选择按钮,然后...

    jQuery移动端图片文件上传插件.zip

    10. **自定义配置**:为了满足不同项目的需求,插件通常提供一系列可配置选项,比如设置上传URL、指定文件类型、调整上传大小限制、设置按钮样式等。 通过以上这些技术,jQuery移动端图片文件上传插件能够为开发者...

    jquery File Style

    "jQuery File Style" 是一个专为网页上传功能设计的jQuery插件,旨在提供美观、定制化的文件输入元素样式。这个插件允许开发者轻松地将普通的HTML文件上传输入框转化为具有现代设计感的交互元素,提升用户在网页上的...

    jQuery图片上传插件支持多图批量上传与多文件批量上传控件

    本文将详细讲解“jQuery图片上传插件”,它支持多图批量上传和多文件批量上传功能,适用于各种网页应用。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等...

    美化File控件-图片按键上传文件

    【标题】"美化File控件-图片按键上传文件"涉及的知识点主要集中在前端网页的文件上传功能上,尤其是如何在用户界面中实现美观且实用的文件上传组件。在这个主题下,我们将探讨HTML5的File API、CSS样式美化、...

    jquery上传图片控件

    Uploadify允许开发者通过CSS自定义按钮样式,或者通过绑定jQuery事件来扩展功能,例如`'onSelect'`事件可在用户选择文件后执行特定操作,`'onComplete'`事件则在文件上传成功后触发。 5. **兼容性考虑** 虽然...

    00type=file导入文件按钮样式修改的jsp代码-完美好

    总结来说,"00type=file导入文件按钮样式修改的jsp代码-完美好"涉及了HTML、CSS和JavaScript(可能包括jQuery)的结合应用,以改善Web表单中的文件上传功能。通过自定义样式和添加交互逻辑,我们可以使原本单调的...

    文件上传控件+左侧菜单控件

    在实际开发中,"Panel+file"可能表示将文件上传控件集成在一个面板(Panel)中,这样的设计有助于信息的分组和展示,使用户能够更清晰地看到上传状态和相关信息。Panel组件在Bootstrap中被广泛使用,它可以是一个带...

    bootstrap高大尚的多上传控件与单上传控件

    本主题将深入探讨如何在Bootstrap中创建高大尚的多上传控件与单上传控件,以提升用户体验并实现美观的文件上传功能。 1. **Bootstrap基础知识** 在开始构建上传控件之前,我们需要对Bootstrap的基本结构有所了解。...

    jQuery实现可拖拽文件的上传控件美化插件dropify源码.zip

    在这个场景下,`jQuery实现可拖拽文件的上传控件美化插件dropify源码.zip` 提供了一个优雅的解决方案,它基于jQuery构建,为文件上传提供了拖放功能,并且对界面进行了美化,提高了用户体验。 Dropify是一款轻量级...

    Jquery上传控件

    jQuery上传控件是前端开发中常用的一种组件,它极大地简化了网页中的文件上传功能。在传统的HTML表单中,文件上传通常涉及到复杂的JavaScript和后端处理,而jQuery上传控件通过封装这些复杂逻辑,使得开发者可以更...

    Js/Jquery 实现自定义 上传 按钮

    标题 "Js/Jquery 实现自定义 上传 按钮" 涉及到的是使用JavaScript和jQuery库来创建一个自定义样式的文件上传按钮。在网页设计中,原始的文件上传控件往往样式单一,不符合现代网页的美观要求。通过JavaScript和...

    jquery批量上传图片插件

    在IT行业中,jQuery是一个非常流行的JavaScript库...总的来说,"jQuery批量上传图片插件"是一个实用的工具,它结合了jQuery的便利性和文件上传的复杂性,为Web开发人员提供了一个快速实现批量图片上传功能的解决方案。

    JQuery多文件上传源码

    Uploadify是一个流行的jQuery插件,它可以实现异步上传,提供进度条显示,支持自定义上传按钮样式,还可以处理各种错误情况。`locale` 文件夹可能包含不同语言的本地化设置,以便于不同地区的用户使用。 **web....

Global site tag (gtag.js) - Google Analytics