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. Python --判断路径是否为目录或文件

    os.path.isdir( ), os.path.isfile(),os.listdir( ), os.walk( ) 参考网址:https://blog.csdn.net/xxn_723911/a ...

  2. windows 下 修改jmeter ServerAgent端口

    from:https://blog.csdn.net/wanglha/article/details/51281462 如果想修改UDP和TCP的端口该如何做呢,可以采用如下的方式: CMD命令进入S ...

  3. oracle存储过程出现ORA-01403: 未找到数据 问题解决方法

    这段时间在做一个业务,需要用到存储过程处理业务逻辑,但是出现一个ORA-01403: 未找到数据 问题, 那么这个应该如何解决这个问题 declare mixType integer; begin - ...

  4. RK3288 GPIO

    简介GPIO, 全称 General-Purpose Input/Output(通用输入输出),是一种软件运行期间能够动态配置和控制的通用引脚.RK3288有9组 GPIO bank: GPIO0,G ...

  5. python day1 之三级菜单的正确姿势

    看了几个同学有关三级菜单的实现,都是通过一级一级输出,是较为过程的实现.另外如果菜单(树形结构)更多级这样处理起来就比较麻烦了. 可以使用python强大的列表和字典,实现的更优美或简洁一些: 注:复 ...

  6. js定义函数方式有。。。

    1,常见方式 function  fun(data,...){ console.log(data); } 注:随处可调用 2. 函数直接定义函数 var fun = function (data,.. ...

  7. Android 音视频深入 二十一 FFmpeg视频剪切

    视频剪切我意外的发现上一次的视频压缩的代码能够运行FFmpeg视频剪切的命令,但是不能做视频合并的命令,因为不能读取记录了几个视频的路径的txt文件. 这里我就说直说视频剪切的过程,不说代码,只说lo ...

  8. android项目导入eclipse变成java项目——修改.project文件——亲测有效

    解决办法:http://www.cnblogs.com/yunfang/p/6068599.html

  9. shutil

    import shutil#功能是将db文件中的内容拷贝到haha这个文件中去,但是haha原有的内容会被清空#shutil.copyfileobj(open('db','r',encoding='u ...

  10. flask基础--第二篇

    1.Flask中的HTTPResponse,Redirect, render #导入render_template和redirect from flask import Flask,render_te ...