<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test js</title>
<style>
#pic{
width:100px;
height:100px;
border-radius:50% ;
margin:20px auto;
cursor: pointer;
}
.upfile{
/*opacity: 0;*/
}
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}

</style>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<body>

<div class="img_show img_show1">
<p class="p-flex">
<span class="vertical-blue"></span><span class="left-A" >水印设置</span>
<img src="" alt="" class="img-big" width="103" height="103">
<img src="" alt="" class="img-centre" width="103" height="103">
<img src="" alt="" class="img-small" width="103" height="103" >
</p>
<p class="text-blue">
<a href="javascript:;" class="file">上传水印
<input type="file" class="upfile" value="更换" class="changes" accept="image/*">
</a>
</p>
</div>

</body>
<script>
upfile = function(){
$('.img_show').each(function(){
var $this = $(this),
btn = $this.find('.upfile'),
img = $this.find('img');
btn.on('change',function(){
var file = $(this)[0].files[0],
imgSrc = $(this)[0].value,
url = URL.createObjectURL(file);
if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)){
alert("请上传jpg或png格式的图片！");
return false;
}else{
img.attr('src',url);
img.css({'opacity':'1'});
}
});
});
}();
</script>
</html>

点击之后上传图片到页面 input type="file" 样式的更多相关文章

  1. css input[type=file] 样式美化，input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  3. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  4. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. CSS <input type="file">样式设置

    这是最终想要的效果~~~ 实现很简单,div设置背景图片,<input type="file"/>绝对定位上去再设置opacity:0(透明度为0 ) 直接上代码,希望 ...

  6. 知识点：定义input type=file 样式的方法（转）

    ——“当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的 input type=file” 为什么要美化file控件?试想一下,别 ...

  7. html的文件控件<input type="file">样式的改变

    一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...

  8. input[type=file] 样式美化，input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  9. <input type="file"> change事件异常处理办法

    问题:最近发现一个奇怪的bug, 那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来 ...

随机推荐

  1. vue_music:排行榜rank中top-list.vue中样式的实现:class

    排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的2x 3x图 不同的样式--:class 考虑分辨率的2x 3x图--需要在stylu中的mixin中bgImage根据屏幕分辨率选择图片 ...

  2. Python之Django的Model2

    一.创建数据库 创建数据库 进入数据库: mysql -uroot -p 创建数据库: CREATE DATABASE test1 CHARSET=utf8; 连接数据库 虚拟环境中安装数据库模块:p ...

  3. 【Mail.Ru Cup 2018 Round 2 C】 Lucky Days

    [链接] 我是链接,点我呀:) [题意] [题解] 题解的作者: manish_joshi 对于任意一个k 因为那条直线(关于x,y的方程可以看出一条直线)的斜率>= 所以肯定会经过第一象限. ...

  4. 1013MySQL监控利器-Innotop

    转自 http://www.cnblogs.com/ivictor/p/5101506.html 安装过程中 可以使用 YUM INSTALL INNOTOP进行直接安装 Innotop是一款十分强大 ...

  5. geos库交叉编译生成ARM平台库

    版本号信息: GEOS:geos-3.4.2.tar.bz2(http://trac.osgeo.org/geos/) CPU:ARM 编译器:arm-linux 4.2.2 1.  解压源代码包ge ...

  6. ul,li不能左右居中的问题

    近期帮朋友做一个他们公司的商品站点,用到了曾经学到的html+css技术,当然做站点少不了Javascript和jquery这些..... 这个功能主要实现了导航条里面的条目是居中的.所以声明了ul, ...

  7. 性能优化——mysql数据库

    一 mysql经常使用命令 1. 打开日志 1) show global variables like "%genera%"; 2)set global general_log=o ...

  8. C++求解汉字字符串的最长公共子序列 动态规划

        近期,我在网上看了一些动态规划求字符串最长公共子序列的代码.可是无一例外都是处理英文字符串,当处理汉字字符串时.常常会出现乱码或者不对的情况. 我对代码进行了改动.使用wchar_t类型存储字 ...

  9. c17---指针

    // // main.c // 指针基本概念 #include <stdio.h> // 基本数据类型作为函数的参数是值传递, 在函数中修改形参的值不会影响到外面实参的值 void cha ...

  10. linux下图片转换工具[【转】

    本文转载自:https://linux.cn/article-8014-1.html 计算机术语中,批处理指的是用一个非交互式的程序来执行一序列的任务的方法.这篇教程里,我们会使用 Linux 命令行 ...