helondeng 于 1年前发表 6669 4 1
最近做产品小A的需求,设计到图片的上传问题,整理一下。 PC上传图片 基本结构 1. form[enctype="multipart/form-data"] 2. input[type="file"] 3. 上传完毕后,获取图片url,显示到页面上 问题 1. 图片要上传完毕后,才能显示 2. 压缩上传 H5 如何解决 1. FileReader 2. canvas FILEREADER FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。 var fr = new FileReader(); fr.readAsDataURL(file); fr.onload = function(e) { $('img').attr('src', e.target.result); }; FORMDATA 实际的上传操作,大多是ajax处理的,FormData可以用来构建form表单。 var fd = new FormData(); fd.append('filename', file); $.ajax({
1年前
HTML&HTML5
ouven ,https://ouvens.github.io/ 于 1年前发表 6185 4 0
一、安装 * 安装初始化 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js或Gulpfile.js,新建fis-config.js文件 配置api介绍如下: FIS.SET(KEY, VALUE) 设置一些配置,如系统内置属性 project、namespace、modules、settings。 fis.set 设置的值通过fis.get()获取 FIS.GET(KEY) 获取已经配置的属性,和 fis.set() 成对使用 FIS.MATCH(SELECTOR, PROPS, [, IMPORTANT]) 给匹配到的文件分配属性,文件属性决定了这个文件进行怎么样的操作;fis.match 模拟一个类似 css 的覆盖规则,负责给文件分配规则属性,这些规则属性决定了这个文件将会被如何处理;另外,后面分配到的规则会覆盖前面的; fis.match('{a,b}.js', { release: '/static/\$0' }); fis.match('b.js', {
1年前
构建工具
ShiJianwen 于 7个月前发表 5922 3 1
REACT React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: * 组件化 * 利用 props 形成单向的数据流 * 根据 state 的变化来更新 view * 利用虚拟 DOM 来提升渲染性能 [http://7tszky.com1.z0.glb.clouddn.com/FgHh-hjZfigrSqf_9MZhjgmknC5N] 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?React 中每个组件都有 setState 方法用于改变组件当前的 state,所以可以把更改 state 的逻辑写在各自的组件里,但这样做的问题在于,当项目逻辑变得越来越复杂的时候,将很难理清 state 跟 view 之间的对应关系(一个 state 的变化可能引起多个 view 的变化,一个 view 上面触发的事件可能引起多个 state 的改变)。我们需要对所有引起 state
7个月前
javascript技术
daihuimi 于 1年前发表 5847 3 4
学习整理了web缓存的一些策略,如有不正确的地方,欢迎指正。 缓存策略 [http://thumbsnap.com/i/bTOegvzm.png?0809] 浏览器端的缓存规则 对于浏览器端的缓存来讲,这些规则是在 HTTP协议头 和 HTML页面的Meta标签 中定义的。他们分别从 新鲜度 和 校验值 两个维度来规定浏览器是否可以直接使用缓存中的副本,还是需要去源服务器获取更新的版本。 新鲜度(过期机制) :也就是缓存副本有效期。一个缓存副本必须满足以下条件,浏览器会认为它是有效的,足够新的: * 含有完整的过期时间控制头信息(HTTP协议报头),并且仍在有效期内; * 浏览器已经使用过这个缓存副本,并且在一个会话中已经检查过新鲜度 满足以上两个情况的一种,浏览器会直接从缓存中获取副本并渲染。 校验值(验证机制) :服务器返回资源的时候有时在控制头信息带上这个资源的实体标签 Etag(Entity Tag) ,它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配,说明资源已经被修改或过期,浏览器需求重新获取资源内容。 一个重要的概念
1年前
HTTP网络
ouven ,https://ouvens.github.io/ 于 2年前发表 5710 0 0
1. 什么是MOCKJS http://mockjs.com/ [http://mockjs.com/] Mockjs是个能够拦截页面ajax请求并模拟返回数据的小工具,借助Mockjs,前端开发中在后台测试接口还没有给的时候就可以自己拦截请求模拟数据进行愉快的开发了,所以只要制定好了协议,前后端分离开发的成本可以降到基本为0,也不需要联调工具了 2,MOCKJS主要功能 * 基于数据模板生成模拟数据 * 基于html模板申城模拟数据 * 拦截并模拟ajax请求 当然mock模拟的数据不只是随便的输出字符串,它包含了各种格式的模拟数据,例如姓名,段落,时间,日期,图片地址,身份证号,电话,邮箱,ip等等,所以以后搞数据自动校验什么的再也不用手动输入测试了。也就是Mock自动了做了很多测试调试中的那部分体力活,我们只需要安静的写代码就好了。 数据模板则是根据一个模板自动根据某个规则产生数据,例如序号产生自增的数组等 数据模板定义 DTD数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值: 'name|rule': value 例如:
2年前
前端库
ouven ,https://ouvens.github.io/ 于 1年前发表 5683 4 1
2015-2016前端架构体系技术精简版 [http://7tszky.com1.z0.glb.clouddn.com/FsPayu9dzc8ecy1M16qQl5zmQe01] 点击查看github高清图 [https://github.com/ouvens/frontend-system-map] 点击查看完整版 [https://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html] 一、框架与组件 **bootstrap等UI框架设计与实现 * 伸缩布局:grid网格布局 * 基础UI样式:元素reset、按钮、图片、菜单、表单 * 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 * 响应式布局:布局、结构、样式、媒体、javascript响应式 * 第三方插件:插件管理 **jQuery、zepto使用原理以及插件开发 * 支持amd、cmd、全局变量的模块化封装
1年前
浏览器
张颖 ,认真认真 于 1年前发表 5567 5 1
VIDEO标签属性和事件介绍 为了文章的完整性,首先还是列举一下video标签的属性: * src :视频的属性 * poster:视频封面,没有播放时显示的图片 * preload:预加载 * autoplay:自动播放 * loop:循环播放 * controls:浏览器自带的控制条 * width:视频宽度 * height:视频高度 Video 对象属性: * audioTracks: 返回表示可用音频轨道的 AudioTrackList 对象。 * autoplay: 设置或返回是否在就绪(加载完成)后随即播放视频。 * buffered: 返回表示视频已缓冲部分的 TimeRanges 对象。 * controller: 返回表示视频当前媒体控制器的 MediaController 对象。 * controls: 设置或返回视频是否应该显示控件(比如播放/暂停等)。 * crossOrigin: 设置或返回视频的 CORS 设置。 * currentSrc: 返回当前视频的 URL。
1年前
HTML&HTML5
link ,除了分享,也是知识管理。 于 1年前发表 5465 0 0
概述 PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.( http://phantomjs.org/) [http://phantomjs.org/)] PhantomJS是一个无界面的webkit内核浏览器,你可以把它当作一个没有界面的Safari。 安装 目前PhantomJS的最新版本的2.0,官方文档中有提到说:如果在使用老版本时碰到一些难解的bug,可以升级到最新版试试。 WINDOWS 直接下载 phantomjs-2.0.0-windows.zip
1年前
nodeJS全栈
莫卓颖 于 1年前发表 5269 3 2
相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如c等),本文试图从前端的角度出发介绍如何通过canvas来进行简单的图像识别。 CANVAS是什么 canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像 CANVAS图片处理运用 对于canvas来说,主要是两个方法对图片处理比较重要,一个是通过html5 canvas的 getImageData 方法获取图片的像素信息,可以很方便的通过方法导入到把网络图片或者本地的图片导入至canvas中并获取图片的像素信息,可以修改像素信息后通过另外一个重要的方法putImageData导出处理后的图片。 1、获取canvas调用var c = document.createElement('canvas'); context = c.getContext('2d'); 2、获取导入图像信息var hiddenImage = new Image(); hiddenImage.src=图片地址
1年前
javascript技术
coverguo 于 1年前发表 5260 4 1
以下是之前学习的一些HTML5 API的总结,在HTML5中有许多功能和接口很值得我们去了解和学习。 * 页面可见性API--page Visbility * 全屏API --full Screen * 获取MediaAPI--getUserMedia * 电池API --battery * 资源预加载API--link Prefetching PAGE VISIBILITY 页面可见性API 该API可以用来检测页面对于用户的 可见性 ,即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时,可使用pageVisibility接口进行相应的事件监听和处理。) PAGE VISIBILITY的介绍 【document.hidden】 该值表示page是否是可见的,值为boolean值 【document.visibilityState】 这个visibilitystate 可有三个值得可能: 【visible】 表示该page是处于最前面的页面并且不是处于一个最小化的窗口
1年前
HTML&HTML5
黎腾 ,如果sea能带走我的哀愁 于 2年前发表 5232 8 3
有人说,前端的界限就在浏览器那儿。 无论你触发了多少bug,最多导致浏览器崩溃,对系统影响不到哪去。 这就像二次元各种炫酷的毁灭世界,都不会导致三次元的世界末日。 然而,作为一个前端,我发现是有方式打开次元大门的… 这个实验脑洞较大,动机无聊,但某种意义上反映了一些 安全问题 。 想象一下,有天你在家里上网,吃着火锅还唱着歌, 点开一个链接,电脑突然就蓝屏了 !想想还真有点小激动。 起因 故事得从localStorage说起。 html5的本地存储,相信大家都不陌生。将数据以二进制文件形式存储到本地,在当前应用得非常广泛。 windows下的chrome,localStorage存储于 C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Local Storage 文件夹中。但如果任由网页无限写文件,对用户硬盘的伤害可想而知,因而浏览器对其做了大小限制。 对于一个域名+端口,PC侧的上限是5M-10M之间,移动侧是则不大于2.5M。 那么问题就变成: 这样的限制足够保护用户硬盘了吗 ? 关键
2年前
Web安全
daihuimi 于 1年前发表 5220 1 0
本文从新人角度讲一讲对angular中MVVM模式的理解,以及angular特性的源码实现。img [https://angularjs.org/img/AngularJS-large.png] MVVM核心原理 MVVM模式是 Model-View-ViewMode (模型-视图-视图模型)模式的简称,其最早出现在微软的WPF和Silverlight框架中。MVVM模式利用框架内置的双向绑定技术对MVP(Model-View-Presenter)模式的变型,引入了专门的ViewModel(视图模型)来实现View和Model的粘合,让View和Model的进一步分离和解耦。 主要思想其实也很简单:在ViewModel中构建一组状态数据(state data),作为View状态的抽象。然后通过双向数据绑定(data binding)使ViewModel中的状态数据(state data)与View中的显示状态(screen state)保持一致。这样,ViewModel中的展示逻辑只需要修改对应的状态数据,就可以控制View的状态,从而避免在View上开发大量的接口。
1年前
前端库