最近写的项目需要用的上传图片的功能但是浏览器自带的按钮样式实在是不忍直视,肯定要进行修改,网上也有很多方法(自己查....),我这里用了个取巧的方法:就是函数的间接调用 在点击btn的时候让它执行了图片选择的函数

代码虽然很简单  但是效果很明显,再也不用为选择器的样式担心了~随便设计

html 代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="text/javascript" src="js/choseImage.js" ></script>

        <style>

        .Btn{

            width: 100px;

            height: 50px;

            border-radius: 10px;

            background-color: #72D5FB;

            position: absolute;

            top: 300px;

            left: 300px;

            outline: none;

            border: none;

        }

        #choseImage{

            display: none;

        }

        </style>

    </head>

    <body>

        <input type="file" id="choseImage" onchange="showPreview(source)" />

        <input type="button" class="Btn" value="选择图片" onclick="Btns()")/>

        <script>

            function Btns() {

                document.getElementById("choseImage").click();

            }

        </script>

    </body>

</html>

JS代码

function showPreview(source) {

     var file = source.files[0];

    if (!/image\/\w+/.test(file.type)) {

        alert("请确保文件为图像类型");

        return false;

    }

    if (window.FileReader) {

        var fr = new FileReader();

        fr.readAsDataURL(file);

        fr.onload = function(e) {

            //当图片加载成功后需要执行的操作~

            document.getElementById("myBgimage").src = e.target.result;

        };

    }

}

HTML 上传图片实用小技巧的更多相关文章

  1. PHP 常用函数库和一些实用小技巧

    PHP 常用函数库和一些实用小技巧 作者: 字体:[增加 减小] 类型:转载   包括文件读取函式,文件写入函式,静态页面生成函式,目录删除函式等   文件读取函式 //文件读取函式 function ...

  2. Vim实用小技巧

    Vim实用小技巧 一些网络上质量较高的Vim资料 从我07年接触Vim以来,已经过去了8个年头,期间看过很多的Vim文章,我自己觉得非常不错,而且创作时间也比较近的文章有如下这些. Vim入门 目前为 ...

  3. svn checkout 实用小技巧

    svn checkout 实用小技巧 by:授客 QQ:1033553122   问题描述: 用svn小乌龟软件,进行update,commit之前,先要把svn工作目录checkout到本地,那么问 ...

  4. 实用小技巧（一）：UIScrollView中上下左右滚动方向的判断

    https://www.jianshu.com/p/93e8459b6dae 2017.06.01 01:13* 字数 674 阅读 1201评论 0喜欢 1 2017.06.01 01:13* 字数 ...

  5. VC6.0实用小技巧

    VC6.0的若干实用小技巧 .检测程序中的括号是否匹配 把光标移动到需要检测的括号(如大括号{}.方括号[].圆括号()和尖括号<>)前面,键入快捷键 “Ctrl+]”.如果括号匹配正确, ...

  6. 必看！macOS进阶不得不知的实用小技巧

    不知道大家对使用苹果电脑的体验如何?您充分利用您的mac了吗?其实macOS上存在着许多快捷方式和技巧可以帮助简化我们的工作流程,提高效率,但是在日常生活中经常被人们忽略或者遗忘.以下是macdown ...

  7. 实用小技巧：Notepad++直接连接Linux

    实用小技巧:Notepad++直接连接Linux 前言 号称编辑器之神的Vim对于只会用几个基础操作的本人而言,在编辑一些大型文本有那么些力不从心: 平时都是通过Xftp拖到本地,修改完后再覆盖回去: ...

  8. Visual Studio实用小技巧

    有一个有关微软Office的笑话,说的是它的特性太多: 当你觉得自己发现了一个Office的新特性时,它已经存在很多年了. 本文将介绍一些在Visual Studio(免费下载)中很实用却被忽略的小技 ...

  9. 谈谈UI设计的6个实用小技巧

    从事UI设计的朋友们,肯定知道我们在做UI设计时,其实是可以通过一些小技巧来帮我们设计的界面更加的漂亮.实用.交互性强,用户体验更好.今天的话,上海艾艺在互联网上面搜寻了几个小技巧.在这里跟大家一起来 ...

随机推荐

  1. Mysql binlog 安全删除

    简介: 如果你的 Mysql 搭建了主从同步 , 或者数据库开启了 log-bin 日志 , 那么随着时间的推移 , 你的数据库 data 目录下会产生大量的日志文件 shell > ll /u ...

  2. CI 扩展 Service

    CI 扩展 Service 说明 CodeIgniter是一套典型的MVC框架,M负责数据,C负责交互,V负责视图,但是随着业务逻辑越来越复杂, 必然会涉及到一些列操作过程,例如用户下订单,就会存在校 ...

  3. ABAP 常见查询问题解决方法

    在ABAP 编程的时候会遇到查询单条语句的时候数能取对  但是条目数多了的话 会出现数不准确的问题   原因可能出现在查询使用了二分法查询方式  二分法查询下必须按排序的字段排序  还得按照排序的字段 ...

  4. LeetCode 64 Minimum Path Sum

    Problem: Given a m x n grid filled with non-negative numbers, find a path from top left to bottom ri ...

  5. React学习笔记-8-属性和状态详解

    属性的含义和用法props=properties 英文中属性的意思.属性不可以修改,也就是属性不可以由组件进行修改,组件的属性是由父组件传递过来的,相当于组件在出生的时候带的.用法第一种:直接在调用组 ...

  6. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  7. Java Spring的IoC和AOP的知识点速记

    Spring简介 Spring解决的最核心的问题就是把对象之间的依赖关系转为用配置文件来管理,这个是通过Spring的依赖注入机制实现的. Spring Bean装配 1. IOC的概念以及在Spri ...

  8. MS SQLServer 批量附加数据库 分类： SQL Server 数据库 2015-07-13 11:12 30人阅读 评论(0) 收藏

    ************************************************************ * 标题:MS SQLServer 批量附加数据库 * 说明:请根据下面的注释 ...

  9. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  10. 3.4.4 数据预留和对齐(skb_reserve, skb_push, skb_put, skb_pull)

    转自:http://book.51cto.com/art/201206/345043.htm <Linux内核源码剖析:TCP/IP实现>本书详细论述了Linux内核2.6.20版本中TC ...