文档章节

JS触发file类型Input的onclick()

周田
 周田
发布于 2016/03/23 11:02
字数 103
阅读 691
收藏 3

之所以要做这件事,是为了做一个好看的上传按钮。

然后把文件input给隐藏了,通过这个自定义的按钮来呼出上传窗口

输入图片说明

输入图片说明

<input type="file"  id="fileInput" value="上传" >
            <input type="button"  id="customInput"  value="自定义样式按钮" onclick="TriggerOtherInputOnClickEvent()">
<script>
    function TriggerOtherInputOnClickEvent()
    {
        document.getElementById("fileInput").click();
    }
</script>
<style>
        #customInput
        {
            border-radius: 25px;
            width:140px;
            height:50px;
            border:1px;
            background-color: #FF702A;
        }
        #fileInput
        {
            display:none;
        }
    </style>

© 著作权归作者所有

周田
粉丝 4
博文 122
码字总数 22818
作品 0
德阳
私信 提问
加载中

评论(1)

berg-dm
berg-dm
回头自测研究下, 13
JS中onpropertychange事件和onchange事件区别

当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获。例如一个 <input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpro......

钟小华
2011/04/28
861
0
移动开发中,遇到了安卓不能支持HTML5文件上传的问题,怎么解决

我在做HTML5开发,在页面中这么写,在我们的安卓产品中可以正常选择相册,但是因为原生的input type="file"太难看,我决定用img 代替 它,如下 ' JS方法如下: function uploadObject(className){...

孙大大
2014/12/24
6.1K
1
如何更新父窗体

Response.Write(" ") 第一种方案是: file a.htm function OpenDialog(url,param) { return window.open(url,param, "DialogWidth:450px;DialogHeight:450px;help:no;status:no"); } file b.......

晨曦之光
2012/03/09
60
0
HTML+js+css实现点击图片弹出上传文件窗口的两种思路

第一种:CSS实现 <style> <!-- .fileInputContainer{ height:256px; background:url(upfile.png); position:relative; width: 256px; } .fileInput{ height:256px; overflow: hidden; font-......

wangwenya
2014/09/07
19.4K
0
JavaScript的self和this使用小结

一、self   这个非常简单。我们知道,打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身,它返...

new个对象
2018/05/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 linuxdeployqt qt5.13.1 打包程序

原文链接:https://www.cnblogs.com/linuxAndMcu/p/11016322.html 一、简介 linuxdeployqt 是Linux下的qt打包工具,可以将应用程序使用的资源(如库,图形和插件)复制到二进制运行文件所在的...

shzwork
17分钟前
3
0
IDEA 配置Springboot项目热部署

实现的方式概述 注意以下的热部署方式在IDEA是默认没有打开自动编译的,手动编译需要快捷键(Ctrl+Shift+F9),自动编译的修改配置如下:(注意刷新不要太快,会有1-2秒延迟) File-Settings-C...

小强的进阶之路
28分钟前
5
0
免费数据分析工具:secsoso

前段时间思考了理想数据分析平台,之后我们根据这个思路开发了spl语言并提供了一个数据分析平台,这个平台主要用在搜索ES,数据库索引中的数据。但后来发现对文件的事后处理也是个非常重要的...

赛克蓝德
30分钟前
4
0
暗黑2不能正常启动?带你轻松使用WIN10运行游戏

暗黑破坏神2这款游戏由于年代比较久远,所以设置启动这方面与现在的大部分游戏有很大差距,由于当初完美运行暗黑2是当年使用最多的XP系统,在使用现在大多数玩家使用的WIN7到WIN10系统常会出...

太空堡垒185
34分钟前
6
0
maven项目对象模型(二)

1.4.4.传递性依赖 一个传递性依赖就是一个依赖的依赖。如果project-a依赖于project-b,而后者接着依赖于project-c,那么project-c就是被认为是project-a的传递性依赖。如果project-c依赖于p...

万建宁
34分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部