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. 华为交换机VRP系统命令试图

  2. PAT 1132 Cut Integer

    1132 Cut Integer (20 分)   Cutting an integer means to cut a K digits lone integer Z into two integer ...

  3. vue-cli使用swiper插件

    使用的教程https://blog.csdn.net/lbpro0412/article/details/82465067

  4. 新建项目找不到android studio:appcompat v7:27.+包。

    1.我们在build.gradle(project)中添加maven中的google库: allprojects { repositories { jcenter() maven { url &quo ...

  5. '假定以下程序经编译和连接后生成可执行文件PROG.EXE,如果在此可执行文件所在目录的DOS提示符下键入:PROG ABCDEFGH IJKL<回车>,则输出结果为( ). void main( int argc, char *argv[]) { while(--argc>0) cout<<argv[argc]; cout<<"\n"; }

    main(int argc,char *argv[])函数的两个形参,第一个int argc,是记录你输入在命令行(你题目中说的操作就是命令行输入)上的字符串个数:第二个*argv[]是个指针数组,存 ...

  6. c/c++面试题一

    1.找错 void test1() { char string[10]; char *str1="0123456789"; strcpy(string,str1); } 试题一字符 ...

  7. C# [Win32] [GDI+] [API] Load HFONT from Memory

    // gdiplusenums.h //-------------------------------------------------------------------------- // Fo ...

  8. lintcode 程序题

    1500802025 才仁代吉 第一链表类参数是整形链表,广度优先遍历: 队列是先进先出的概念 所以使用于保存节点 2插树的话 1个节点有个2个子节点 先将根节点入队,然后访问根节点数据(此时让根节点 ...

  9. Visitor 模式心得

    最近读到Visitor模式,还是一知半解的.偶然翻到Uncle Bob对该模式的推导过程,有所心得,和大家分享一下. Uncle Bob 的链接是: http://butunclebob.com/Ar ...

  10. Codeforces Round #162 (Div. 1) B. Good Sequences (dp+分解素数)

    题目:http://codeforces.com/problemset/problem/264/B 题意:给你一个递增序列,然后找出满足两点要求的最长子序列 第一点是a[i]>a[i-1] 第二 ...