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. 现代 PHP 新特性 —— 闭包

    一.概述 闭包是指在创建时封装周围状态的函数,即使闭包所在的环境的不存在了,闭包中封装的状态依然存在.闭包对象实现了__invoke()魔术方法,只要变量名后有(),PHP就会查找并调用__invok ...

  2. Android 正则表达式实例

    editText正则表达式的使用 检查输入是否符合规则 import Android.app.Activity; import android.os.Bundle; import android.vi ...

  3. SWUST OJ(1101)

    顺序表中的数据的循环移动 #include <iostream> #include <cstdlib> using namespace std; int main() { in ...

  4. 第八届 蓝桥杯 7、正则问题 dfs

    描述:正则问题 考虑一种简单的正则表达式:只由 x ( ) | 组成的正则表达式.小明想求出这个正则表达式能接受的最长字符串的长度. 例如 ((xx|xxx)x|(x|xx))xx 能接受的最长字符串 ...

  5. 【C#】【对象转XML】xml序列化

    笔记:xml序列化 /// <summary>        /// xml序列化        /// </summary>        /// <param nam ...

  6. git 工作区管理

    git工作区 git的工作区就是电脑中能看到的目录,比如我的learning文件夹就是一个工作区 版本库暂存区 工作去有一个隐藏的目录.git,这个不算工作区,而是git的版本库 git的版本库中存了 ...

  7. 信用卡欺诈数据的分析-excel篇

    本篇文章为大家提供了数据集分析的思路和步骤,同时也分享了自己的经验. 一.背景 反欺诈是一项识别服务,是对交易诈骗.网络诈骗.电话诈骗.盗卡盗号等行为的一项风险识别.其核心是通过大数据的收集.分析和处 ...

  8. number类型精度分析

    numbe类型的可设置的取值范围: number无限定 number(6)是6位整数 number(6,2)是4位整数,精确到两位小数,最多6位.四舍五入 number(6,-2)是6位整数,精确到百 ...

  9. dom 及bom

    BOM的全称为Browser Object Mode,中文名是浏览器对象模型.它的一些功能和特性如下:1. BOM提供了独立于内容而与浏览器窗口进行交互的对象2. 由于BOM主要用于管理窗口与窗口之间 ...

  10. ImportError libcublas.so.9.0

    What to do when you've installed cuda and tensorflow, but you get this error right after you import ...