input  中的type  file类型  在ie10及以上还算正常，在ie9中你就找不到他在哪了

解决此类的问题就需要巧妙的运用的css   以及input 了

需要两个input配合来写，一个input为普通的text文档  一个input为button类型的浏览

然后将inputfile类型用定位定位在input  text类型  和button类型上然后 用opacity  =0   透明度为0将 file类型的input隐藏

这样在text类型和button类型上点击任何地方都可以浏览电脑中的文件了

这样还不算完，这样你上传了，input  text类型的input是空的，用户不知道他选中图片没有，这时候就需要获取图片的路径，然后赋值到text类型的input中去

获取本地图片的路径 并且赋值

最终的效果如图

关注微信小程序  

input type file兼容性的更多相关文章

  1. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  2. 用jQuery重置用于文件上传的input (type="file")

    页面中有如下标签: <input type="file" id="upload"/> 此标签本用于文件上传,现在有需要将其值重置为空.于是想当然地写 ...

  3. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  4. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  5. input type=file文件选择表单元素二三事

    一.原生input上传与表单form元素 如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢,就是: enctype="multipart/form-dat ...

  6. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  7. HTML input type=file文件选择表单的汇总（二）

    1. 原生file input大小.按钮文字等UI自定义 元素input的原生样式,不是太好看: 有一种方法是这样的:让file类型的元素透明度0,覆盖在我们好看的按钮上.然后我们去点击好看的按钮,实 ...

  8. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  9. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

随机推荐

  1. linux基础命令touch

    touch /home/ceshi    创建文件命令 touch    /home/ceshi1 ceshi2    同时创建两个文件. cat   显示文件内容(短的文件) -n  带行号 tac ...

  2. Django框架简介-路由系统

    2.2 路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 你就是 ...

  3. Android 工程越来越大，运行变卡解决方法

    打开AS的安装目录 android-studio/bin/studio.exe.vmoptions studio64.exe.vmoptions -Xms2048m-Xmx2048m-XX:Reser ...

  4. VS2015在win10上编译的程序在Win7上运行的方法

    在win10系统上使用vs2015编译了一个32位的应用程序.在win7上报错无法启动. 下面的win7系统上是可以运行的 无法运行的win7系统: 报错: 1.应用程序无法正常启动(0xc00000 ...

  5. Nginx 作用

    django 请求的生命周期 Nginx 的作用: 浏览器 --- nginx(反向代理器)-- uwsgi --- django项目nginx : 负载均衡, 将任务分发给不同的uwsgi 动静分离 ...

  6. Netty客户端发送消息并同步获取结果

    客户端发送消息并同步获取结果,其实是违背Netty的设计原则的,但是有时候不得不这么做的话,那么建议进行如下的设计: 比如我们的具体用法如下: NettyRequest request = new N ...

  7. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  8. asp.netmvc部署到linux(centos)

    介绍将asp.netmvc项目部署到centos系统. 开发工具:win10+vs2017+.NetFramework4.6.1+Vmware14+centos 1.安装Jexus 这里使用独立版(专 ...

  9. 微信为什么不能下载apk 微信不能打开App下载地址的问题

    此方法可以实现微信内置浏览器跳转到手机其它浏览器,现在网上其它的方法都只是一个页面,让访问者自己手动点右上角浏览器打开,而这个不同,是可以直接自动跳转的.       <?php   error ...

  10. _net之美 记录笔记

    第一章: Valpoint vPoint1=new Valpoint(); Console.WriteLine(vPoint1.x); 1.=号左边ValPoint vPoint1,在线程上创建一个V ...