改变文件上传input file类型的外观
当我们使用文件上传功能时,<input type="file">,但是外观有点不符合口味,如何解决这个问题?
<input type="file" id="fileInput" style="display:none;">
<input id="img-upload" type="button" onclick="showFileInput()" value="点击上传照片">
<script>
function showFileInput(){
var fileInput=document.getElementById("fileInput");
fileInput.click();
}
</script>
还是用到了input的上传功能,只不过不在点击它,而是通过点击button,从而传递到file,实现间接点击file按钮,功能实现了,下面就可以随意对button修改你想要的样式了
改变文件上传input file类型的外观的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- DVWA 黑客攻防演练(五)文件上传漏洞 File Upload
说起文件上传漏洞 ,可谓是印象深刻.有次公司的网站突然访问不到了,同事去服务器看了一下.所有 webroot 文件夹下的所有文件都被重命名成其他文件,比如 jsp 文件变成 jsp.s ,以致于路径映 ...
- 多文件上传 input 的multiple 属性
一.上传多张图片并且预览 HTML: <div class="container"> <label>请选择一个图像文件:</label> < ...
- Spring MVC-表单(Form)标签-文件上传(File Upload)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...
- AFNetworking 文件上传Data,File图片,文件等上传
一:AFNetworking的文件上传: 主要几个以下类似 - (BOOL)appendPartWithFileURL:(NSURL *)fileURL name:(NSString *)name e ...
- vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]
今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 算法 - Catalan数 (卡特兰)
http://blog.csdn.net/linhuanmars/article/details/24761459 https://zh.wikipedia.org/wiki/%E5%8D%A1%E5 ...
- 解决:oracle+myBatis ResultMap 类型为 map 时返回结果中存在 timestamp 时使用 jackson 转 json 报错
前言:最近在做一个通用查询单表的组件,所以 sql 的写法就是 select *,然后 resultType="map" ,然后使用 jackson @ResponseBody 返 ...
- K:Treap(堆树)
Treap=Tree+Heap.Treap是一棵二叉排序树,它的左子树和右子树分别是一个Treap,和一般的二叉排序树不同的是, Treap记录一个额外的数据, 就是优先级.Treap在以关键码构 ...
- JavaScript unshift()怎样添加数据的?
var a = new Array(); a.unshift("red", "green"); a.unshift("black"); 这个 ...
- 浅谈常用的设计模式(new)
简单工厂模式 抽象工厂模式 代理模式 装饰者模式(Decorator):动态地给一个对象添加一些额外的职责,就增加功能来说,装饰着模式比生成子类更加灵活. 建造者模式:builder构建
- 虚拟主机服务器php fsockopen函数被禁用的解决方法
为了服务器安全考虑很多主机商禁用了php的fsockopen函数,昨天进博客,使用cos-html-cache生成静态文件,尼玛提示: Warning: fsockopen() has been di ...
- javascript之for循环的几种写法
背景 javascript中的for循环选择多种多样,可你知道其中的差别在哪里吗?什么时候又该用哪种循环才是最佳策略?以上这些是本文想讨论的,欢迎交流. 说明 1.20年前的for循环 //20年前的 ...
- Android View的事件分发机制和滑动冲突解决方案
这篇文章会先讲Android中View的事件分发机制,然后再介绍Android滑动冲突的形成原因并给出解决方案.因水平有限,讲的不会太过深入,只希望各位看了之后对事件分发机制的流程有个大概的概念,并且 ...
- Pwn With longjmp
前言 这个是 seccon-ctf-quals-2016 的一个题,利用方式还是挺特殊的记录一下. 题目链接 http://t.cn/RnfeHLv 正文 首先看看程序的安全措施 haclh@ubun ...
- 云卡门禁苹果SDK_BLEDOOR_SDK_IOS_2016_12_15
// // BLElib.h // BLElib // // Created by szbosk on 16/8/16. // Copyright © 2016年 szbosk. All rights ...