整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
对于文件上传，我们并不陌生，HTML自带了上传文件表单，但是我们都知道，那些真的满足不了我们的大多数需求，诸如多选、预览、删除、拖拽等各类繁杂的功能，原生的文件上传Input确实很难满足我们的需求，因此就诞生了很多第三方的上传组件，比如大家熟知的百度WebUploader、之前我也有介绍过类似的组件，功能都非常丰富，大家可以根据自己的需求酌情选择，符合自己的需要才是最好的，当然原生的或许就够了呢！
https://github.com/kartik-v/bootstrap-fileinput
此项目一共多大一千多次提交，60+发布以及，4k+star，可见还是很受广大开发者的认可的！
以下是借助翻译将功能大致描述下：
1、Bootstrap 3.x和4.x的增强型HTML 5文件输入以及各种文件的文件预览，提供多种选择，可恢复的块上传等；
2、该插件允许您使用一种简单的方法来设置高级文件选择器/上传控件，该控件专为Bootstrap 3.x或4.x CSS3样式而设计；
3、它通过提供支持来预览各种文件，即图像，文本，html，视频，音频，闪存和对象，进一步增强了文件输入功能。
4、此外，它还包括基于AJAX的上传，拖放文件，查看上传进度以及有选择地预览，添加或删除文件。
【1】使用bower
bower install bootstrap-fileinput
【2】使用npm
npm install bootstrap-fileinput
【3】初始化，例如
//默认
$("#input-id").fileinput();
// 外加插件
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
文件输入功能（翻译+意译）：
1、该插件将简单的HTML文件输入转换为高级文件选择器控件。对于不支持JQuery或Javascript的浏览器，将有助于回退到正常的HTML文件输入。
2、文件输入包含以下三个部分，其中包含用于控制显示的选项和模板：
3、type = file如果设置了插件，插件会自动将输入转换为高级文件选择器输入class = file。输入的所有选项都可以作为HTML5 data属性传递 。
4、能够选择和预览多个文件。使用HTML 5文件阅读器API来读取和预览文件。如果选择了多个文件，则显示正在加载到预览区域的文件的进度。
5、提供预定义的模板和CSS类，可根据需要更改为文件输入显示的样式。
6、能够配置插件以显示带有初始标题的图像/文件的初始预览 （对于记录更新方案更有用）。参考initialPreview， initialPreviewConfig，和 initialCaption 插件选项部分中的属性用于配置此属性。
7、能够将内容缩放为详细预览。在预览中查看缩放内容的幻灯片，最大化为无边框或全屏预览。
8、能够通过拖放在初始预览中对内容进行排序/重新排列。
9、能够完全控制窗口小部件并控制样式和布局。
10、通过语言环境/翻译支持同一页面上的多语言小部件。
11、显示/隐藏以下任何或所有内容的选项：
12、自定义目标容器元素的位置以显示整个插件，标题容器，标题文本，预览容器，预览图像和预览状态。
13、对于文本文件预览，将文本自动换行到缩略图宽度，并显示环绕指示符以在悬停时显示完整文本。您可以自定义换行指示符（默认为...）。
14、自定义预览，进度和所选文件的信息。
15、上传操作默认为表单提交。支持上传路由/服务器操作参数，用于基于自定义ajax的上传
16、触发JQuery事件以进行高级开发。目前可用的事件是filereset， fileclear，filecleared，fileloaded，和fileerror。
17、已禁用和只读文件输入支持。
18、动态自动调整超过容器宽度的长文件名的文件标题。
19、提升fileimageuploaded在预览容器上完全加载图像后触发的新事件。
20、当预览图像超出预览容器的大小时自动调整大小。
21、完全模板化和可扩展，允许以开发人员想要的方式配置文件输入。
22、基于各种文件预览类型预览智能。内置的文件支持类型分类为 image，text，html，video，audio，flash， object，和other。
23、allowedPreviewTypes：您现在可以配置允许将哪些文件类型显示为预览。默认为['image', 'html', 'text', 'video', 'audio', 'flash', 'object']。因此，默认情况下，所有文件类型都被视为要预览的对象。对于只有exampleTo预览image 和video，你可以将其设置为['image', 'video']。要禁用所有文件类型的内容预览并将其显示previewIcon为缩略图，请将其设置为null，empty或false。
24、allowedPreviewMimeTypes：除此之外allowedPreviewTypes，您还可以控制可以显示哪些mime类型以供预览。默认为null，表示支持所有mime类型。>注意：对于2.5.0版，您现在可以通过设置allowedFileTypes和控制允许上载哪些文件类型或扩展名allowedFileExtensions。
25、layoutTemplates：允许您在一个属性中配置所有布局模板设置。可配置的布局的对象是：main1，main2， preview，caption，和modal。
26、previewTemplates：每种预览类型的所有预览模板都已合并为一个属性，而不是图像，文本等的单独模板。键是设置的格式allowedPreviewTypes，值是用于预览的模板。下面是每个预览文件类型（默认预置的模板generic，image，text，html， video，audio，flash，object，和other）。该generic模板仅用于initialPreview使用直接标记显示 内容。
27、previewSettings：允许您为每个预览图像类型配置宽度和高度。该插件具有默认的宽度和预定义的每个类型，即高度 image，text，html，video，audio，flash，和object。
28、fileTypeSettings：允许您使用回调配置和标识每个预览文件类型。该插件具有预定义识别不同类型即默认回调 image，text，html，video，audio，flash，和object。
29、替换模板中的标签已得到增强。使用此版本，它将自动检查要在模板字符串中替换的每个标记的多次出现。
30、通过在任何其他事件中将输出返回到中止上载，操作事件并轻松添加自己的自定义验证消息。
31、支持多语言和区域设置。
好用的插件千千万，当你正缺少这样一个强大的文件上传组件时，bootstrap-fileinput或许能帮到你，它虽然不是我用过最好的，但至少能符合很多场景下的需求了，特别适合对于文件上传非常频繁的时候来说，真的非常有用，希望能给你带来帮助，当然您如果有更好的推荐，则感谢在评论区留言分享！
PS：笔者近期想深入的学习下Javascript,小伙伴们知道现在有什么书籍比较合适么，网络上的系统化的较少，想要系统的深入学习下，感谢推荐的道友们！
好了，接下来，我们为大家一一介绍一些在web开发技术中人气超高的HTML5特效欣赏。
1.滑动触发
腾讯视频：这一幕你期待已久
长页HTML5，滑动触发动效，和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页，但是目前暂时还不能实现这种滑动触发动画。
百度百科：序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。
百度百科：为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器，脚本来控制其整体或单个的运动，模拟出现真实的效果。
简而言之，就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真，特别适合那些崇尚简约设计风格的网页。
全线性动画可以理解为动画连续，几乎不间断播放，像视频一样流畅细腻。
这支HTML5页面打破了传统幻灯片式的呈现方式，塑造出了一种宽广、素雅、幽静的整体感受，该作品也被很多人推崇为HTML5里的动画片。
虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project，让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新，在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段（比如馆内的彩蛋、12 点闭馆无法访问等等）来创造一个虚拟的真实空间，而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说，“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”
祝福灯笼可以360旋转呈现，而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果，彰显“最飞羊的新春祝愿”。其中意趣和精妙所在，恐非文字所能表述。
“点击屏幕”不新鲜，但是这种屏幕击碎的画面好像也特别讨人喜欢，大概有三轮左右的“击碎”动作，这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性，点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。
整个HTML5页面用打字机的形式呈现，随着用户按下按钮，纸片会逐渐显示出韩寒从1999年起，为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。
什么是Cinemegraphic？如果你不知道，就有点OUT了。顾名思义，Cinema是电影，Graph是图片，Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。
其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念，只见画面上，人物的头发和衣角飞舞着，仿佛吹拂着一阵阵自然风，在炎炎夏日，他们依旧感受着清爽，尽情玩耍。作为互动者的人们，当看到画面上被风拂过的Cinemagraphic动态场景，他们也身临其境地感受到自然风所能带来的这种清爽感受。
下面说说和交互相关的动画特效。
本期文章的最后简单总结一个观点：现在网页上的图片已不再是10年前的那种低分辨率静态图片了，在Web开发的未来必定是要更加多样化，更加丰富多彩，更加方便用户交互的页面。 HTML5应用恰好可以达到这个要求，大家可以看一下几款超赞的HTML5动画的高级特效，效果相当惊艳。
TML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，为了顺应整个互联网时代变迁，使得人们能够以更好的方式去进行网页结构搭建，HTML5应运而生。HTML5新增了如下几个方面你的特性：
一、语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
HTML结构语义化，是最近几年才提出来的，以前的html结构，都是一堆没有语义的冷冰冰的标签。最泛滥的就是div+css，以前的页面，一打开就是一堆div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且w3c也在HTML5给出了几个新的语义化的标签。
语义化之后文档会有什么效果呢？就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。。
怎么知道自己的页面结构是否语义化，那就要看HTML布局结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的代码结构。也就是说，去掉CSS的装饰之后，整个HTML的结构阅读起来依旧主次分明，能够看清其整体的架构模块。这也就是，语义化之后我们想要HTML文档达到的效果。
其实语义化，也无非就是自己在使用标签的时候在合适的场景下选取合适的标签，比如h1~h5系列标签，在HTML中就是就是用来定义标题；而p标签，大部分情况下用以处理文字段落，table表格则适合做信息表格,等等。
我们对整个HTML结构进行语义化的规范操作有如下几个好处：
1，这样有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
2，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
3，便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
HTML5中新增的语义化标签进一步加强了我们针对整个HTML结构进行语义化跟进的可操作性，使得我们网页布局的可阅读性更高。
常见的HTML5语义化标签及其使用场景如下：
<article>
定义页面独立的内容区域。
<aside>
定义页面的侧边栏内容。
<command>
定义命令按钮，比如单选按钮、复选框或按钮
<details>
用于描述文档或文档某个部分的细节
<dialog>
定义对话框，比如提示框
<summary>
标签包含 details 元素的标题
<figure>
规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>
定义 <figure> 元素的标题
<footer>
定义 section 或 document 的页脚。
<header>
定义了文档的头部区域
<mark>
定义带有记号的文本。
<meter>
定义度量衡。仅用于已知最大和最小值的度量。
<nav>
定义导航链接的部分。
<progress>
定义任何类型的任务的进度。
<section>
定义文档中的节（section、区段）。
<time>
定义日期或时间。
二、本地存储特性（Class: OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
三、连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
我们使用WebSocket 与Ajax的长轮询做对比，从而感受WebSocket 的优势所在，其对比图如下：
四、网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
video元素，在HTML5中专门用来播放网络上的视频或者电影。
audio元素，在HTML5中专门用来播放网络上的音频。
使用video和audio元素进行播放时就不在需要使用其他的插件了，只要我们的浏览器支持HTML5就可以。
浏览器的支持：
Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都对audio元素和video元素支持！
1，基本使用方法
audio元素只需要给他指定一个src属性：
<audio src="MP3.mp3" controls="controls"></audio>
对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替
<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>
video元素要设定好长宽和src属性就可以了：
<video width="750" height="400" src="time.mp4"></video>
同样对于不支持video的浏览器可以在中间加入替换文字：
<video width="750" height="400" src="time.mp4">您的浏览器不支持video元素</video>
source元素指定多个播放格式与编码：
source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：
<video>
<source src="video.m4v" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" />
</video>
各种设备对编码格式的支持情况：
webm(.webm)格式的视频 火狐4.0+、chrome6.0+、opera10.6+
mp4(.m4v)格式的视频 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+
ogg(.ogv)格式的视频 火狐3.5+、chrome3.0+、opera10.5+
mp4(.mp4)格式的视频 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+
2、viedo与audio的常用属性
audio元素和video元素的常用属性
src属性：在这个属性里面指定媒体数据的URL地址。
controls属性：指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停等按钮。
width和height属性（video独有）：指定视频的宽度与高度。
autoplay属性：这个属性指定是否当我们网页加载完成之后就开始自动播放。
preload属性：这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放的速度。
preload属性的三个值：
none 表示不进行预加载。
metadata 表示只预加载媒体的元数据。
auto(默认值) 表示预加载全部的视频或者音频。
2，使用Javascript提供的方法操作多媒体。
Javascript为我们提供了丰富的方法，用以灵活控制多媒体文件，这样我们就可以根据实际的项目需求，定义自己的多媒体播放器。
其中controls属性经过设定，会在界面中显示一个浏览器自带的控制条。如果对于UI没有要求的需求，其内置控制器已经可以满足大部分的需求。隐藏控制条并模拟：那么实现一个自定义功能的播放器关键就在于，我们不使用原生的控制器，将其隐藏掉之后，在下方同样的位置通过HTML、CSS来模拟所需样式，同时通过js来调用video标签所暴露给我们的接口函数及属性，以及检测用户的操作行为来同步的模拟UI与视频播放数据的相应变化。
几个核心函数及属性的用法：
myVid=document.getElementById("video1");//控制视频开关
myVid.play() // 触发媒体文件的播放
myVid.pause() //触发媒体文件的暂停
myVid.currentTime=5; //返回或设定当前视频播放位置
myVid.duration // 返回视频总长度
myVid.volume //控制音量大小
myVid.muted //控制多媒体是否静音
五、三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. 右边的图片展示了一些 <canvas> 的实现示例。
使用 <canvas> 元素不是非常难但你需要一些基本的HTML和JavaScript知识。一些过时的浏览器不支持<canvas> 元素，但是所有的新版本主流浏览器都支持它。Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形，我们使用一个JavaScript上下文对象，它能动态创建图像（ creates graphics on the fly）
随着大数据等领域的发展及应用，canvas绘图在数据可视化方面扮演了重要的角色，可以让我们灵活地通过各种形式展示数据，提高数据的可读性，增强产品的数据能力。
下图展示了canvas在数据可视化方面的应用效果：
综上，HTML5新功能的出现，使得前端在很多新的应用领域发挥出了更加强大的能力，也让很多已有项目在表现形式上有了更好的选择。私信【前端】领取web前端开发/html5学习视频。
*请认真填写需求信息，我们会在24小时内与您取得联系。
