zoukankan      html  css  js  c++  java
  • 点击图片添加文件在Chrome中使用的兼容问题

    canrun

    View Code
    <html>
    <head>
        <title>点击图片添加文件在Chrome中的兼容问题</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="zh-CN" />
    </head>
    <body>
    <img src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg" onclick="getElementById('inputfile1').click()" title="添加图片-失效示例" alt="添加图片-失效示例">
    <input type="file" name="image" style="display:none" id="inputfile1"/>
    
    <img src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg" onclick="getElementById('inputfile2').click()" title="添加图片-成功示例" alt="添加图片-成功示例">
    <input type="file" name="image" style="height:0;0;z-index:-1" id="inputfile2"/>
    </body>
    </html>

    问题所在:
      1:style="display:none"  2:style="height:0;0;z-index:-1"

          解析:在Chrome中将<input type="file"/> 赋予display:none样式之后会导致点击失效。正确的做法是将其宽高设置为0,将其z-index调低,并隐于图片之下(position,本文没添加,根据自己

          使用时情况而定)即可。

    推荐:用最简单的例子实现jQuery图片即时上传  (您可以参考此文打造一个即时上传的方案)

  • 相关阅读:
    SQLite基本(实例FileOrganizer2013.5.12)
    MongoDB常见问题
    Node.js
    Linux安装indicator-china-weather
    Hadoop常见问题
    Hadoop HDFS文件操作
    Ubuntu下载、zsync、安装、常见问题
    Mongo-Hadoop
    Mongo JavaTest
    MongoDB 快速入门
  • 原文地址:https://www.cnblogs.com/Zjmainstay/p/css_input_file_chrome.html
Copyright © 2011-2022 走看看