当我们使用文件上传功能时,<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类型的外观的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  2. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  3. (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...

  4. DVWA 黑客攻防演练(五)文件上传漏洞 File Upload

    说起文件上传漏洞 ,可谓是印象深刻.有次公司的网站突然访问不到了,同事去服务器看了一下.所有 webroot 文件夹下的所有文件都被重命名成其他文件,比如 jsp 文件变成 jsp.s ,以致于路径映 ...

  5. 多文件上传 input 的multiple 属性

    一.上传多张图片并且预览 HTML: <div class="container"> <label>请选择一个图像文件:</label> < ...

  6. Spring MVC-表单(Form)标签-文件上传(File Upload)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...

  7. AFNetworking 文件上传Data,File图片,文件等上传

    一:AFNetworking的文件上传: 主要几个以下类似 - (BOOL)appendPartWithFileURL:(NSURL *)fileURL name:(NSString *)name e ...

  8. vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]

    今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...

  9. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 《Programming iOS 7》读书笔记 - 窗体大小与状态栏

    1.从iOS7开始,状态栏开始变为透明的,根识图占领了整个窗体,包括状态栏后面的20像素高的区域,这种样式无法被改变.iOS6的状态栏是不透明的,窗体的尺寸通常会比屏幕的尺寸要小,可以设置窗体的尺寸为 ...

  2. Q:链表的倒数第K个元素

    问题:如何得到链表中的倒数第k个元素?   一种简单的思路是遍历链表一遍,并统计出链表中节点的数目,然后计算出倒数第k个元素到链表头节点的元素的距离,然后得到对应的结果.但是,我们能否有一种更加简便的 ...

  3. 浅谈TCP/IP(new 常见面试问题)

    1. TCP/IP重传机制,如何保证消息读到一个完整内容再反序列化 2. TCP四次回收比三次握手多了什么操作,什么时候会进入Time_await状态 3.

  4. java-集合小结

    Java集合框架提供了一套性能优良.使用方便的接口和类,包括Collection和Map两大接口,它们都位于   java.util           包中.其中 Collection集合包含两个常 ...

  5. 转 mysqli 事务常用方法

    原文:mysqli 事务常用方法 1. //打开(true)或关闭(false)本次数据库连接的自动命令提交事务模式 //参数如果设置为 FALSE,则表示关闭 auto-commit.如果设置为 T ...

  6. 爬虫必备—scrapy-redis(分布式爬虫)

    转载自:http://www.cnblogs.com/wupeiqi/articles/6912807.html scrapy-redis是一个基于redis的scrapy组件,通过它可以快速实现简单 ...

  7. iframe跨源报错:"Blocked a frame with origin from accessing a cross-origin frame"

    一.报错信息: “Blocked a frame with origin from accessing a cross-origin frame” 二.在stackoverflow上找到原因 Same ...

  8. python之切片

    1.为什么要学习切片[切片是解决何种问题的?] (2)对于含有元素很少的list,我们遍历其前三个元素,通常可以这样来实现: #遍历list,取其中索引为[0].[1].[2]的元素: L = ['X ...

  9. CentOS7系列--1.6CentOS7配置sudo

    CentOS7配置sudo 如果一些用户共享权限,配置sudo是为了分离用户的职责 1. 将root 的权限传递给所有用户 [root@centos7 ~]# visudo 添加下面的内容到最后一行, ...

  10. JavaScript写九九乘法表

    <script language=javascript> for(i=1;i<=9;i++){ for(j=1;j<=9;j++){ document.write (i+&qu ...