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. 蓝桥杯第九届省赛 sscanf（）,str.c_str()函数的使用

    标题:航班时间 [问题背景]小h前往美国参加了蓝桥杯国际赛.小h的女朋友发现小h上午十点出发,上午十二点到达美国,于是感叹到“现在飞机飞得真快,两小时就能到美国了”. 小h对超音速飞行感到十分恐惧.仔 ...

  2. ionic2使用cordova打包的环境搭建

    1.安装node.js(不用说了) 2.安装JDK(java的开发基础类库) 3.安装SDK(安卓开发集成包) 4.gradle( JAVA界的Weboack ,支撑app的编译,打包的流程) 5.安 ...

  3. 【C/C++】C++11 Variadic Templates

    Variadic Templates 1.function template:利用“参数个数逐一递减”的特性,实现递归函数调用 template <typename T, typename... ...

  4. 爬虫（四）requests模块1

    引入 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用. 警告:非专业使用其他 HTTP 库会导致危险的副作用,包括:安全缺陷症.冗余代码症.重新发明轮子症.啃文档 ...

  5. Windows编译安装使用cephfs客户端

    本文介绍如何将cephfs映射到windows的一个盘上,以磁盘映射的方式访问cephfs. 1.下载必要安装包 tdm-gcc:(安装时选32位)https://sourceforge.net/pr ...

  6. mysql实现随机获取几条数据的方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xionglangs/article/details/50630758sql语句有几种写法 1:SEL ...

  7. 【转】Oracle系列导航目录

    .Net程序员学用Oracle系列(1):导航目录 .Net程序员学用Oracle系列(2):准备测试环境 .Net程序员学用Oracle系列(3):数据库编程规范 .Net程序员学用Oracle系列 ...

  8. Quick Sort -- 快速排序算法

    //参数说明: // int data[] : 待排序的数据数组 // int m : 下限值 // int n : 上限值 void QuickSort ( int data[] , int m , ...

  9. android 重启app

    package com.xproject.utility; import java.lang.reflect.Field; import java.lang.reflect.InvocationTar ...

  10. C# [GDI+] [API] Get Image bytes Length

    MemoryBMP "{b96b3caa-0728-11d3-9d7b-0000f81ef32e}" 2 Bmp "{b96b3cab-0728-11d3-9d7b-00 ...