当我们使用文件上传功能时,<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. zookeeper watcher

    ZooKeeper 的  watcher 机制主要包括客户端线程.客户端 WatchManager 和 ZooKeeper 服务器三部分. 工作方式:客户端在向 zk 服务器注册 Watcher 的同 ...

  2. EF 调用oracle 存储过程

    EF是如何调用的存储过程的,本人也是翻遍了个大网站,查阅了很多资料.终于解决了遇到的问题. 第一步:创建存储过程,在这里我就不多说了,不是文章说的重点. declare O_VOUCHER_ACT_D ...

  3. 转:JS判断值是否是数字(两种方法)

    JS判断值是否是数字   1.使用isNaN()函数 isNaN()的缺点就在于 null.空格以及空串会被按照0来处理 NaN: Not a Number /***判断是否是数字***/ 1 2 3 ...

  4. opencv3.2.0形态学滤波之膨胀

    //名称:膨胀 //日期:12月21日 //平台:QT5.7.1+opencv3.2.0 /* 膨胀(dilate)的含义: 膨胀就是求局部最大值的操作,就是将图像(或图像的一部分,A)与核 B 进行 ...

  5. 知识蒸馏(Distillation)

    蒸馏神经网络取名为蒸馏(Distill),其实是一个非常形象的过程. 我们把数据结构信息和数据本身当作一个混合物,分布信息通过概率分布被分离出来.首先,T值很大,相当于用很高的温度将关键的分布信息从原 ...

  6. AngularJs 第一个自定义指令编写

    公司在做一个OA系统, 包括移动端(从微信企业号进入OA系统),电脑端. 电脑端还是用的传统的easyui做界面,asp.net mvc作为服务端.这个技术已经很成熟了配合权限框架很快就能开发出来.但 ...

  7. canvas交互部分

    mousemove let mouse = { x: undefined, y: undefined, } // 鼠标监听事件,获取鼠标移动的相应坐标 window.addEventListener( ...

  8. How To Change Log Rate Limiting In Linux

    By default in Linux there are a few different mechanisms in place that may rate limit logging. These ...

  9. MySQL 5.7 Reference Manual】15.4.2 Change Buffer(变更缓冲)

    15.4.2 Change Buffer(变更缓冲)   The change buffer is a special data structure that caches changes to se ...

  10. MySQL · 数据恢复 · undrop-for-innodb

    Ref:https://www.aliyun.com/jiaocheng/1109809.html  摘要: 简介 undrop-for-innodb 是针对 innodb 的一套数据恢复工具,可以从 ...