`

点击自定义按钮上传图片的一种方式

阅读更多

由于上传文件的选择框在界面上占位置且不大好看,而且不同浏览器的样式不一样,像chrome的浏览按钮是在左边,为了不同浏览器都能用我们自定义的美观的按钮点击一下就能弹出文件选择框,我们一般会选择将file 输入框隐藏,然后通过其他的方式触发它,示例代码如下:

 

<a href="#" id="upload_pic"><img src="custom_btn.png"/></a>
<div class="hide"><input type="file"  id="select_file" /></div>
<script>
$('#upload_pic').on('click',function(){
	$('#select_file').click();
});
</script>
 

 

这种方式将点击事件转发到file按钮上,在firefox与chrome上是没有问题的,但在IE下上传文件会报没有权限的错误。

 

所以最好的一种办法是不用JS控制点击,而直接点击file 输入框,但需要用CSS来控制file 输入框的位置以及显示。

 

很多网站都采用这种方式, 比如新浪微博的上传图片:

 


html代码:

 

<div class="laPic_btnmore">            
<a node-type="inputCover" class="W_btn_e" href="javascript:void(0);">                
<span><em class="ico_one"></em>单张图片</span>                
<form action="" method="POST" enctype="multipart/form-data" target="upload_target" name="pic_upload" id="pic_upload" action-type="form" node-type="form">                                    
<input type="file" class="input_f" name="pic1">
</form>
</a>        
</div>

CSS代码:

.laPic_btnmore {
    float: left;
    height: 30px;
    overflow: hidden;
    padding: 0 20px 15px 0;
    text-align: center;
    vertical-align: top;
}


.W_btn_e {
    overflow: hidden;  /*隐藏多余的部分*/
    position: relative;  /*相对位置*/
}

.input_f {
    border: 0 none;
    cursor: pointer;
    font-size: 21px;
    height: 30px;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute; /*与W_btn_e位置跟随*/
    top: 0;
    width: 100px;
}
 
  • 大小: 24.7 KB
分享到:
评论

相关推荐

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

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

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

    这种控件不仅提供了一种直观的方式显示任务进度,还带有动态效果,如平滑的填充动画,使用户对任务状态有更直观的感受。开发者可以利用这个控件来显示文件上传、下载或处理的进度,提升用户体验。 "垂直进度条控件....

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

    在C#编程中,自定义控件是一种常见的需求,它允许开发者根据项目需求创建具有独特功能和视觉效果的用户界面元素。"C#自定义控件---自定义水晶按钮控件完整源码2019"是一个教程或项目,旨在教给开发者如何在C#环境下...

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

    为了实现自定义样式的上传按钮,需要隐藏原生的`&lt;input type="file"&gt;`按钮,并通过CSS样式覆盖或者JavaScript动态创建按钮元素,然后通过JavaScript监听这个自定义按钮的点击事件,并在事件中触发隐藏的文件上传`...

    html修改FileUpload控件的浏览按钮的文字改为自定义

    为了实现自定义按钮文字的目的,我们可以采用以下两种方式之一: 1. **使用CSS隐藏默认按钮并创建一个新的按钮**: - 使用CSS隐藏原生的文件输入控件。 - 创建一个新的按钮元素,通过JavaScript控制其点击事件,...

    自定义Web的上传控件

    一种折衷的方法是使用渐进增强,为支持新特性的浏览器提供高级功能,同时为老浏览器保留基本功能。 在实际项目中,有一些成熟的库和框架可以帮助我们更轻松地实现自定义上传控件,例如jQuery File Upload、Dropzone...

    web自定义文件上传控件

    这个项目,作为作者的第一个作品,旨在提供一种定制化的解决方案,以满足不同的界面需求和交互体验。在此,我们将深入探讨这个话题,了解如何创建这样的控件,并涉及相关的前端和后端技术。 首先,前端部分主要涉及...

    按钮切换两个视图

    另一种方法是使用Storyboard中的Segues,通过拖拽操作创建从一个视图控制器到另一个的连接,然后在按钮的点击事件中调用performSegue(withIdentifier:sender:)。 如果需要自定义切换效果,可以使用Container View...

    微信小程序原生自定义上传图片

    微信小程序是一种轻量级的应用开发框架,由腾讯公司推出,主要应用于移动端,提供丰富的原生API和组件,方便开发者快速构建交互式的应用。在微信小程序中,原生自定义上传图片功能是用户交互中常见的需求,它允许...

    上传按钮美化

    "上传按钮美化"是提升网页交互体验的一种方式,它旨在通过创新的设计和友好的操作方式,使得文件上传变得更加吸引人且方便。在本教程中,我们将探讨如何将传统的文字式上传按钮转化为具有视觉吸引力、可点击图片的...

    Android-DownLoadProgressButton下载显示进度按钮控件

    `Android-DownLoadProgressButton`是一个专为Android设计的下载显示进度的按钮控件,它将下载进度集成到按钮中,提供了一种直观且美观的方式来展示文件下载状态。 这个控件的主要功能是为用户提供一个可点击的按钮...

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

    layui的upload模块提供了一种优雅的方式来实现这一需求。本篇文章将详细讲解如何在layui中实现一个页面上使用多个独立的文件上传按钮,以及相关的配置和注意事项。 首先,layui的upload组件是基于HTML5的File API...

    使用html+css+js实现自定义弹出对话框/输入框

    CSS还能够实现对话框的居中显示,以及为按钮添加点击效果等。同时,`popDrag`类用于实现拖拽功能,这部分可以通过JavaScript实现。 然后,JavaScript(JavaScript Object Notation)负责交互逻辑。`jquery.min.js`...

    自定义的QPushButton插件,可放到qt设计师使用v2.0

    一个简单的自定义QPushButton插件,可放到qt设计师使用,功能有:点击时按钮连同按钮上的文字一起缩放,给人一种很明显的点击效果。具体使用方法可参考文章http://blog.csdn.net/qqwangfan/article/details/71724118 ...

    自定义WebForm控件集

    在.NET框架中,WebForm是ASP.NET的一种编程模型,它允许开发者创建动态、交互式的网页应用。本资源“自定义WebForm控件集”显然是一系列定制的ASP.NET控件,旨在提高开发效率和用户体验。下面我们将深入探讨其中涉及...

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

    同时,这种做法也保留了文件选择的功能,用户点击自定义按钮时,依然能够打开文件选择对话框进行上传操作。 需要注意的是,虽然这种方法可以实现自定义样式,但仍然存在一些限制,例如,无法直接改变文件选择对话框...

    ios-自定义提示框.zip

    在iOS应用开发中,自定义提示框是一种常见的用户交互方式,它可以帮助开发者向用户提供信息、警告或确认操作。本文将深入探讨如何在iOS项目中创建并实现自定义提示框,以替代系统默认的UIAlertView和...

    在U9界面上添加按钮的三种方法总结

    在U9界面上添加按钮的三种方法总结 1、在工具栏上添加 2、在功能区添加 3、在功能区下拉列表上添加

    C#.net自定义控件开发用户自定义控件扩展控件

    其次,**用户控件(User Control)**是一种特殊类型的自定义控件,它是由多个现有的.NET控件组合而成的新控件。用户控件提供了一种可视化设计的方式,允许开发者在设计器中拖放控件并布局,就像构建一个小型的用户...

    CListCtrl添加按钮

    在Windows编程中,`CListCtrl`是MFC(Microsoft Foundation Classes)库提供的一种控件,用于创建类似Windows资源管理器中的列表视图。在这个场景中,【标题】"CListCtrl添加按钮"指的是如何在`CListCtrl`中添加或...

Global site tag (gtag.js) - Google Analytics