当我们使用文件上传功能时,<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. PL/SQL Developer 和 Instant Client客户端安装配置

    一. 准备工作 1. 点击此下载 PL/SQL Developer 2. 点击此下载 Instant Client 二. 配置Instant Client 1. 新建  %安装目录%\network\ ...

  2. zookeeper watcher

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

  3. 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...

  4. css-图文案例

    效果如下: 附上代码: <html> <head> <title>World</title> <style type="text/css ...

  5. JavaWEB SSH文件上传

    一.提交表单的<form> method属性必须为post  并且添加enctype="multipart/form-data" 属性 前台: <td>上传 ...

  6. Getting Started with Erlang

    Getting Started with Erlang Erlang is a great language that lets you build highly concurrent applica ...

  7. ArcGIS Server集群布署

    ArcGIS Server集群布署 准备如下的4台机器: 计算机名 IP 布署软件 说明 VMWIN2008ENSS1 192.168.1.111 ArcGIS for Server   VMWIN2 ...

  8. apache ftp server的简单入门(数据库验证)

    apache的简单校验分为两种,一直是前面提到的properties的校验,具体参考:apache ftp server的简单入门(properties验证) 今天来说一种数据库的校验,这种方式在项目 ...

  9. SQLSERVER2012里的扩展事件初尝试(下)

    SQLSERVER2012里的扩展事件初尝试(下) SQLSERVER2012里的扩展事件初尝试(上) 我们继续文章扩展事件在Denali CTP3里的新UI(二)里的这个实验 脚本文件下载:http ...

  10. 不同服务器数据库之间的数据定时同步到sql server (支持mysql,oracle数据库同步到sql server)

    1,在目标数据库新增服务器对象->连接到服务器->新建服务器连接 2,编写数据同步业务PROC ALTER PROC TestProc AS BEGIN --打开完全事物回滚 SET XA ...