`
流浪鱼
  • 浏览: 1682488 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自定义上传按钮

 
阅读更多

采用样式文件定义一个按钮,然后让file按钮覆盖到自定义按钮上

html结构如下:

<div class="dfile">
   <span>
      <input type="button" class="inp_btn" value="浏 览">
      <input name="FILE_URL" type="file" style="width: 62px" class="inp_file" onchange="file_Upload(this)">
   </span>
</div>

 样式:

.dfile {
display: inline-block;
position: relative;
width: 75px;
}

.dfile .inp_btn {
width: 75px;
height: 30px;
padding: 0px;
text-align: center;
cursor: pointer;
}

.dfile .inp_file {
position: absolute;
left: 0;
top: 0;
width: 75px;
height: 30px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
-webkit-opacity: 0;
}

 通过样式inp_file,可以看出是给文件选择框添加了绝对定位并且完全透明 

分享到:
评论

相关推荐

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

    总的来说,自定义上传按钮是提高网页交互性的一种常见实践,它结合了JavaScript和jQuery的强大功能,允许开发者创造出符合设计风格且易于使用的上传界面。通过使用像jQuery Custom File Input这样的工具,开发者可以...

    vue项目中应用ueditor自定义上传按钮功能

    Vue项目中应用ueditor自定义上传按钮功能 本文主要介绍了Vue项目中应用ueditor自定义上传按钮功能,通过以Vue-cli生成的项目为例,讲解了Vue项目中使用ueditor的方法。 一、ueditor的基本使用 ueditor是一款功能...

    自定义图片上传按钮的ckeditor

    用自定义图片上传按钮代替原来的图片上传按钮,实现即时上传插入。覆盖原ckeditor。修改ckeditor.js中imgupload()的上传接口路径。根据接口返回自定义 success: function 中的代码解析出图片路径。

    JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

    如果要实现自定义上传按钮,一般需要设置input为不可见,然后将input与自定义界面放在同一个div中,并将input铺在界面上方: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...

    自定义UITableViewCell上的delete按钮

    因为有人问到,自己就随便写的一个小demo,模仿系统的delete,用了手势,可以实现左右滑动,点击消失,可以对单元格进行删除,但是没有用到重用,由于时间仓促,没来得及处理,希望大家见谅,自己做一下优化就可以了...

    css自定义文件上传按钮样式

    在网页设计中,为了提供更好的用户体验,我们常常需要对文件上传功能进行自定义,使其更加美观和符合网站的整体风格。CSS(Cascading Style Sheets)是实现这一目标的关键工具,它允许我们控制HTML元素的样式,包括...

    ckeditor_4.x自定义按钮控件详细配置

    CKEditor 4.x 自定义按钮控件详细配置 CKEditor 是一个功能强大且广泛使用的富文本编辑器,提供了许多功能强大的插件和配置选项。在 CKEditor 4.x 版本中,我们可以通过自定义按钮控件来扩展编辑器的功能。本文将...

    C#自定义控件---自定义水晶按钮控件完整源码2019

    "C#自定义控件---自定义水晶按钮控件完整源码2019"是一个教程或项目,旨在教给开发者如何在C#环境下创建一个具有独特设计和功能的按钮控件,模拟水晶般的外观。 首先,让我们理解自定义控件的基本概念。在.NET ...

    type=file的inpu美化,自定义上传按钮样式代码

    本文将详细介绍如何对type=file的input进行美化以及自定义上传按钮的样式。 首先,我们需要理解,`&lt;input type="file"&gt;` 的默认行为是创建一个文本输入框和一个“浏览”按钮,用户可以通过这个按钮选择本地文件进行...

    c# 自定义控件库 自定义按钮 自定义进度条

    本库包含了多种自定义控件,如自定义按钮、自定义进度条等,旨在提升应用的用户体验和界面美观度。 首先,"自定义颜色显示的CheckBox.dll"是一个扩展了标准Windows Forms CheckBox控件的组件,允许开发者自定义勾选...

    TinyMCE自定义上传图片

    在描述中提到的"自定义上传图片插件",可能是对TinyMCE原有图片上传功能的增强或替换。这个插件可能包含了以下关键部分: 1. **上传接口**:自定义插件需要实现一个图片上传接口,通常是通过发送HTTP请求到服务器端...

    ckeditor自定义按钮

    自定义上传插件 文档中提到,由于CKFinder是收费组件,并且有时候它的功能可能会多余或者不足,因此有需要开发适合自己项目的上传组件。文档建议使用CKEditor网站上的示例组件(如abbr组件)作为开发的基础。 ####...

    layui一个页面使用多个文件upload上传按钮

    你可以根据需求自定义上传按钮的事件,例如限制上传类型或大小。在`elem`选项中,你可以设置额外的属性,如`accept`来限制文件类型(如`image/*`表示图片,`application/pdf`表示PDF): ```javascript elem: '#...

    ckeditor 自定义上传图片

    **ckeditor自定义上传图片** 在使用ckeditor作为富文本编辑器时,经常需要集成图片上传功能。ckeditor是一款强大的在线文本编辑器,它提供了丰富的文本格式化工具,使得在网页上编辑内容变得简单。然而,ckeditor...

    自定义带下载进度按钮

    在这个场景中,我们关注的是一个自定义的“带下载进度按钮”(DownloadButton)。这个组件不仅作为一个按钮,还提供了实时的下载进度反馈,使用户能够直观地了解文件下载的状态。下面将详细介绍如何实现这样一个功能...

    JQ插件第五十二:自定义上传HTML控件

    4. `jquery.uploadbtn.css`:这是样式表文件,包含了自定义上传按钮的CSS样式,确保控件在视觉上的吸引力和一致性。 5. `jquery.uploadbtn.js`:这是JavaScript文件,包含了实现自定义上传功能的jQuery插件代码,...

    vue-uploader:由simple-uploader.js驱动的Vue.js上传组件

    自定义上传按钮 资料夹上载 队列管理 文件验证 上传进度 剩余时间 块上传 安装 npm install vue-simple-uploader --save 笔记 用法 在里面 import Vue from 'vue' import uploader from 'vue-simple-uploader' ...

    在vue中封装tinymce5,带自定义按钮demo(包括视频,图片上传)

    样式已经设计好,可以通过设置属性进入浏览模式和编辑模式,引入统计字数插件; 使用前先执行以下命令行 npm install tinymce@5.1.0 -S npm install @tinymce/tinymce-vue@3.0.1 -S more directiones(just read the ...

Global site tag (gtag.js) - Google Analytics