JavaScript图片上传预览Bold和Base6

JavaScript图片上传预览Bold和Base64的区别？

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

冬至，希望大家都可以有饺子和汤圆吃，主要是能和自己家人爱人一起吃个饭。

下面进入主题，用原生JS给撸个图片上传，预览的小示例，希望对大家有所帮助。

示例

function fChange() { 
 let file=document.getElementById('file'); 
 // 输出已经选择图片名字 
 console.log(file.value); 
 // 输出已经选择的图片对象 
 console.log(file.files[0]); 
} 
... 
<input type="file" id="file" onchange="fChange()">

10行JavaScript代码完成图片的上传预览

我们怎么把图片对象渲染到页面了？达到可以预览的目的？

// file 转 blob对象 
let bold=window.URL.createObjectURL(file.files[0]); 
console.log('bold==>'+bold); 
 
let boldImg=document.getElementById('bold'); 
boldImg.src=bold; 
 
// file 转 base64 
let base64Img=document.getElementById('base64'); 
var reader=new FileReader(); 
reader.readAsDataURL(file.files[0]); 
reader.onload=function (e) { 
 console.log('base64==>'+this.result); 
 base64Img.src=this.result; 
}

10行JavaScript代码完成图片的上传预览

这样看blob对象和base64都可以预览图片，但是blob对象仅仅是当次缓存，如果刷新，你重新把之前转的字符串放到src是不可以预览的，当时base64是可以的。所以存库的时候不仅可以图片路径，还可以直接存base64（base64很占用数据库空间，文件越大，base64字符串越大）

优化

下面我们对上面示例做优化，可以上传多张图片并预览，美化界面。

10行JavaScript代码完成图片的上传预览

<div id="img-pre"> 
</div> 
<div id="add-pic"> 
 <input type="file" id="up-file" onchange="fChange()"> 
</div>

css样式

#add-pic{ 
 width: 100px; 
 height: 100px; 
 background: url('./add-pic.png') 
} 
#add-pic input{ 
 width: 100%; 
 height: 100%; 
 display: none; 
} 
#img-pre:after{ 
 display: block; 
 content: ''; 
 clear: both; 
} 
#img-pre img{ 
 float: left; 
 width: 100px; 
 height: 100px; 
 margin-right: 10px; 
}

javascript

let addPic=document.getElementById('add-pic'), upFile=document.getElementById('up-file'); 
// 监听图片点击，从而触发input file的点击事件 
addPic.addEventListener('click', function(){ 
 upFile.click(); 
}) 
function fChange() { 
 let file=document.getElementById('up-file'); 
 let imgPre=document.getElementById('img-pre'); 
 
 // file 转 blob对象 
 let bold=window.URL.createObjectURL(file.files[0]); 
 
 // 创建img元素，并添加到img-pre元素里 
 var img=document.createElement("img"); 
 img.setAttribute("src", bold); 
 imgPre.appendChild(img); 
}

主要是通过css隐藏掉input file选择文件按钮，然后用+号图片点击事件来触发input file的点击事件，达到能选择图片的目的。

公告

喜欢小编的点击关注，了解更多知识！

源码地址请点击下方“了解更多”

了更方便地控制网页中各种各样的字体，CSS提供了一系列的字体样式属性，具体如下。

(1)font-size属性：字号

font-size属性用于设置字号，该属性的属性值可以为像素值、百分比数值、倍率等。表3-l列举了fomt-size属性常用的属性值单位，具体如下。

单位	说明
em	倍率单位，指相对于当前对象内文本的字体倍率
px	像素值单位，是阿页设计中常用的单位
%	百分比数值单位，指相对于当前对象内文本的字体百分比

在表1所列的常用单位中，推荐使用像素值单位—px。例如，将网页中所有段落文本的字号设为12px，CSS样式示例代码如下：

· p(font-size:12px;)

(2)font-family属性：字体fomt-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如，将网页中所有段落文本的字体设置为微软雅黑，CSS样式示例代码如下：

p[font-family：“微软雅黑“：]

fomt-family属性可以同时指定多个字体，各字体之间以逗号隔开。如果浏览器不支持第一种字体，则会尝试下一种，直到匹配到合适的字体。例如，同时指定3种字体的CSS样式示例代码如下：

body[font-fanily:“华文彩云”，“宋体“，“黑体"；]

当应用上述代码后，浏览器会首选“华文彩云”字体，如果用户计算机上没有安装该字体则选择“宋体”。以此类推，当fomt-fammily属性指定的字体都没有安装时，浏览器就会选择用户计算机默认的字体。使用font-family属性设置字体时，需要注意以下几点。

· 各种字体之间必须使用英文逗号隔开。

· 中文字体需要加英文引号，但英文字体不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。CSS样式示例代码如下：

body[font-fanily：Arial，“微款雅黑”，“未体”，”黑体”：] /“正确的书写方式"
body(font-fanijy：“微软稚黑”，“宋体”。“黑体”，Arial:) /“错误的书写方式"/

· 如果字体名包含空格、#、S等符号，则该字体必须加英文引号，如“font-family.“Times New Roman":"

· 尽量使用系统欺认字体，以保证网页中的文字在任何用户的浏览器中都能正确显示。

(3)font-weight属性：字体粗细

font-weighn 属性用于定义字体的粗细，其属性值如表所示。

值	描述
normal	默认属性值，定义标准样式的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900（100的整数倍）	定义由细到相的字符，其中400等同于normal,700等同于bold，数值越大字体越粗

表2列举了常用的font-weight属性的属性值。在实际工作中，常用的属性值为normal和bol,分别用于定义正常和加粗显示的字体。

(4)font-variant属性：变体

font-variant 属性用于设置英文字符的变体，一般用于定义小型大写字体，该属性仅对英文字符有效。font-variant 属性的可用属性值如下。

· normal:默认值，测览器会显示标准的字体。small-caps：浏览器会显示小型大写的字体，即所有的小写字

母均会转换为大写字母。但是所有使用小型大写字体的字母和其余文本相比，字体尺寸更小。例如，图3-l2中框线标注的小型大写字母，就是使用font-variant属性设置的。

(5)font-style属性：字体风格

fomt-style属性用于定义字体风格。例如，设置斜体、倾斜或正常字体。font-style属性的可用属性值如下。

· nommal：默认值，测览器会显示标准的字体样式。

· italic：测览器会显示斜体的字体样式。

· oblique：测览器会显示倾斜的字体样式。

当font-style属性取值为italic或oblique时，文字都会显示倾斜的样式，两者在显示效果上并没有本质区别。但italie使用了字体的倾斜属性，并不是所有的字体都有倾斜属性;而obhique只是使文字倾斜，无关该字体有没有倾斜属性。

(6)fomt属性：综合设置字体样式

fomt属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font:font-style font-varlant font-weight font-size/line-height font-fanlly:}

使用fomt属性综合设置字体样式时，必须按上述语法格式中的顺序书写，各个属性以空格隔开(line-height用于设置行间距，属于文本外观属性，在后面将具体介绍)。例如，下面设置字体样式的示例代码：

p{font-fanily:Arial,"宋体";font-size:30px; font-style:italic; font-weight:boid; font-variant:
amal1-cape; line-height:40px;}

上述代码可以使用fomt属性综合设置字体样式，其等价于：

p{font:italic small-caps bold 30px/40px Arial,"宋体";}

其中，不需要设置的属性可以省略(省略的属性将取默认值)，但必须保留fomt-size和 font-family属性，否则font 属性将不起作用。

下面通过一个案例具体演示如何使用fomt属性综合设置字体样式，如下所示。

<!doctype html>
<html>
<head>
<meta charset.-"utf-8">
<title>font l国性</title>
<style type-"text/css">
.one{ font:italic 18px/30px"隶书":}
.two{ font:italic l8px/30px;}
</style>
</head>
<body>
<p class="one">段落1：使用font 属性综合设置段落文本的字体风格、字号，行高和字体。</p>
<p class="two“>段落2：使用font属性综合设置段落文本的字体风格、字号和行高。由于省略了字体属性font-family，
这时font属性不起作用。</p>
</body>
</htnl>

定义了两个段落，同时使用fomt属性分别对它们进行相应的设置，效果如图。

从图中可以看出，font属性设置的样式并没有对第二个段落文本生效，这是因为对第二个段落文本的设置中省略了字体属性“font-family”。

(7)@font-face规则

@font-face是CSS3的新增规则，用于定义服务器字体。通过@font-face规则，可以使用计算机未安装的字体。@font-face规则定义服务器字体的基本语法格式如下：

@font-face{
     font-family:字体名称:
     src：字体路径；
}

在上述语法格式中，font-family用于指定该服务器字体的名称，该名称可以随意定义;sre用于指定该字体文件的路径。

下面通过一个剪纸字体的案例来演示@font-face规则的具体用法，如下所示。

<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>afont-face规则</title>
<style type-"text/css">
@font-face{
font-fanily:jianzhi;   /*服务器字体名称*/
src:url(FZJZJN.TTF);   /*服务器字体文件的路径*/
}
p{
font-fanily:jianzhi;   /*设置字体样式*/
font-size:32px;
}
</style>
</head>
<body>
<p>明确责任</p>
<p>肩负使命</p>
</body>
</htnl>

在例3-6中，第7~10行代码用于定义服务器字体;第12代码用于为段落标签设置字体样式。效果如图所示。

从图中可以看出，当定义并设置服务器字体后，页面就可以正常显示剪纸字体。总结例3-6，可以得出使用服务器字体的步骤。

①下载字体，并存储到相应的文件夹中。

②使用@font-face规则定义服务器字体。

③对元素应用“font-family”字体样式。

字的传统字体有楷书、隶书、草书等等，现在的自制字体数量更多。如果还用着系统默认的微软雅黑，那不妨试着用用新字体。摆脱网页单调的第一步，从字开始！

目标

指定字体系列
设置字体大小、粗细和正斜
设置字体颜色

设置字体--font-family

在日常工作、生活里，我们常常接触到宋体、黑体等传统字体

传统字体

随着人们的审美越来越高，就出现了各种各样新的字体，例如：

火星字体

上面的不算，下面的才算，有很Q的字体，有带有图标的字体等等。

新字体

在CSS中，使用font-family属性来定义字体类型。可指定多种字体，多个字体将按优先顺序排列，以逗号隔开，注意逗号一定要是英文逗号。如果电脑没有第一个字体，则向后选择，以此类推。

语法：font-family：字体1,字体2,字体3;

定义字体

字体大小--font-size

在CSS中，使用font-size属性来定义字体大小。常用的单位是长度值（px）

语法：font-family：像素值;

在css文档里，还有其他的单位，例如绝对单位和相对单位，但是使用的频率远不如长度值单位。

注意：浏览器默认字体大小是16px

定义字体大小

效果

字体粗细--font-weight

在CSS中，使用font-weight属性来定义字体粗细。

语法：font-weight：值;

这个属性就总共3个状态：正常（normal）、较细（lighter）、较粗（bold）

在css文档里，还有数值的选择，其实没多大作用，一般都不会使用。

注意：bold和bolder效果是一样

定义字体粗细

字体正斜--font-style

在CSS中，使用font-style属性来定义字体倾斜效果

语法：font-style：值;

这个属性就总共2个状态：正常（normal）、斜体（italic、oblique）

注意：italic、oblique这两个效果是一样的，只不过有些字体无法通过italic来设置斜体

，只能通过oblique来强制倾斜。

定义字体粗细

效果

字体颜色--color

在CSS中，使用color属性来定义字体颜色。

语法：font-color：颜色值;

颜色值是一个关键字或一个16进制的RGB值

关键字指的就是颜色的英文名称，如red、blue、green等。

16进制RGB值指的就是类似"#FBF9D0"这种形式的值。

定义字体颜色

效果

总结

思维导图

在线咨询

上一篇：四步CSS3教你搞定小菊花 Loading 动画
下一篇：2016CJ专访Layabox CEO谢成鸿：浅谈L

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript图片上传预览Bold和Base6

前言

示例

优化

公告

设置字体--font-family

字体大小--font-size

字体粗细--font-weight

字体正斜--font-style

字体颜色--color

总结

您的项目需求