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

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

html 代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <script type="text/javascript" src="js/choseImage.js" ></script>
  7.         <style>
  8.         .Btn{
  9.             width: 100px;
  10.             height: 50px;
  11.             border-radius: 10px;
  12.             background-color: #72D5FB;
  13.             position: absolute;
  14.             top: 300px;
  15.             left: 300px;
  16.             outline: none;
  17.             border: none;
  18.         }
  19.         #choseImage{
  20.             display: none;
  21.         }
  22.         </style>
  23.  
  24.     </head>
  25.     <body>
  26.         <input type="file" id="choseImage" onchange="showPreview(source)" />
  27.         <input type="button" class="Btn" value="选择图片" onclick="Btns()")/>
  28.         <script>
  29.             function Btns() {
  30.                 document.getElementById("choseImage").click();
  31.             }
  32.         </script>
  33.     </body>
  34. </html>

JS代码

  1. function showPreview(source) {
  2.  
  3.      var file = source.files[0];
  4.     if (!/image\/\w+/.test(file.type)) {
  5.         alert("请确保文件为图像类型");
  6.         return false;
  7.     }
  8.     if (window.FileReader) {
  9.         var fr = new FileReader();
  10.         fr.readAsDataURL(file);
  11.         fr.onload = function(e) {
  12.  
  13.             //当图片加载成功后需要执行的操作~
  14.             document.getElementById("myBgimage").src = e.target.result;
  15.  
  16.         };
  17.     }
  18. }

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. HDU 1754 I Hate It 线段树单点更新求最大值

    题目链接 线段树入门题,线段树单点更新求最大值问题. #include <iostream> #include <cstdio> #include <cmath> ...

  2. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  3. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  4. javascript中的对象

    除了字符串,数字,布尔值(true,false),null,undefined,js中的值都是对象. 操作一个对象 var o = {name: 'man', value: 99} o.name = ...

  5. input表单手机号、身份证号验证

    <form action="" method="post" onsubmit="return checkForm(this)"> ...

  6. 远方的塔--Pylons

    转自:https://en.wikipedia.org/wiki/Pylons_project#Pylons_Framework Pylons

  7. java程序性能优化

    一.避免在循环条件中使用复杂表达式 在不做编译优化的情况下,在循环中,循环条件会被反复计算,如果不使用复杂表达式,而使循环条件值不变的话,程序将会运行的更快. 例子: import java.util ...

  8. python中的collections

    python中有大量的内置模块,很多是属于特定开发的功能性模块,但collections是属于对基础数据的类型的补充模块,因此,在日常代码中使用频率更高一些,值得做个笔记,本文只做主要关键字介绍,详细 ...

  9. access基本操作(c#操作，远程连接，执行sql,加密,备份）

    前言 最近项目用到了access,是的就是access,工作在桌面型的小数据库应用还是会用到的,如果你确定永远不会遇到access的操作,请忽略此篇文章 1.vs配置access 既然是数据库,就少不 ...

  10. Lintcode 97.二叉树的最大深度

    --------------------------------- AC代码: /** * Definition of TreeNode: * public class TreeNode { * pu ...