H5端js触发input file权限问题和图片选择预览

近日复习熟悉前端知识,发现一件事情很有趣。

页面隐藏input file,然后用js来触发,10年前在PC页面就开始用了,不算新知识,但ios会没响应,查找资料发现这样操作是个安全问题,官方是不推荐的,后来在网上看到一个巧妙的解决方式,为input file增加一个label,如<label for=”input1″/>用js触发这个label的事件来激活input file。

 

另一件事,是input选择完后,用jqueryupload上传成功了,但页面的image.src修改为服务器端地址后,会很长时间才加载,5秒以上,查找网上资料,发现这段代码简直是神级代码:
function readURL(input) {

if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$(‘#blah’).attr(‘src’, e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}

$(“#imgInp”).change(function(){
readURL(this);
});
对应的HTML:


your image

用了这段代码之后,加载迅速。。。
代码原帖地址:https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded

Nginx 证书部署备注

nginx的配置在版本上是有所区别的。

一个nginx下必须有一个站点在listen端口号时,要标记为default_server,以前要标记default。

后面的ssl则属于必须配置,不然会报错。

在配置HTTPS之后,一般需要将http的也跳过来,今天学到一个窍门,在HTTP的Server段添加一行代码即可,以前都是走301或在.htaccess加重写规则实现的,今天这一行代码加在nginx的站点配置文件中:

主流浏览器现在对非HTTPS的站点访问时会显著标注不安全,所以HTTPS已经是必备的了,不推荐看作可选项。

微信web开发者工具

下载地址

最新版本: (2016.01.11) 0.1.0

Windows 64位版本:下载地址

Windows 32位版本:下载地址

Mac版本:下载地址

 

http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html

POST请求时返回HTTP 417错误

某些网络情况下,当执行POST请求时,会收到一个错误:

The remote server returned an error: (417).

当使用HTTP/1.1 协议进行POST请求时,会在request header里默认增加一项Expect:100-continue,以通知http服务器,在post前,先发一个只有header的请求到目标服务器询问是否可以接收POST过去的数据,如果可以,目标服务器返回100来通知客户端可以继续POST数据。

出现此错误的原因是,代理服务器错误识别目标服务器为HTTP1.0协议不支持100-continue特性,会自动给客户端返回417错误。

解决此方法是,

  • 设置代理服务器正确识别目标服务器的http协议版本;
  • 客户端设置不做询问,直接POST数据过去,不管服务器端是否准备好;

设置代理服务器的方式略。说一下客户端设置的解决方式。

事实上客户端只要在header里指定下Expect不等于100-continue,就可以跳过询问过程。

LINUX/PHP下是这样的。

Windows/ASP.NET下可通过web.config配置或C#代码里设置:

web.config:

C#:

httpWebRequest.ServicePoint.Expect100Continue = false;

附Expect:100-continue的http1.1协议说明:

对HTTP/1.1代理服务器的要求:
— 若代理服务器接到一个请求,此请求包含值为”100-continue”的Expect请求头域,并且代理服务器可能知道下一站点的服务器遵循HTTP/1.1或更高版协议,或者不知道下一站点服务器的HTTP版本,那么它必须包含此Expect头域来转发此请求。
— 若代理服务器知道下一站点服务器版本是HTTP/1.0或更低,则它不能转发此请求,并且它必须以417(期望失败)状态响应。
— 代理服务器应当维护一个缓存,以记录最近访问下一站点服务器的HTTP版本号。
— 若接收到的请求来自于版本是HTTP/1.0(或更低)的客户端,并且此请求不含值为”100-continue”的Expect请求头域,那么代理服务器不能转发100(继续)响应。

http之100-continue

1、http 100-continue用于客户端在发送POST数据给服务器前,征询服务器情况,看服务器是否处理POST的数据,如果不处理,客户端则不上传POST数据,如果处理,则POST上传数据。在现实应用中,通过在POST大数据时,才会使用100-continue协议。

2、客户端策略。

1)如果客户端有POST数据要上传,可以考虑使用100-continue协议。加入头{“Expect”:”100-continue”}

2)如果没有POST数据,不能使用100-continue协议,因为这会让服务端造成误解。

3)并不是所有的Server都会正确实现100-continue协议,如果Client发送Expect:100-continue消息后,在timeout时间内无响应,Client需要立马上传POST数据。

4)有些Server会错误实现100-continue协议,在不需要此协议时返回100,此时客户端应该忽略。

3、服务端策略。

1)正确情况下,收到请求后,返回100或错误码。

2)如果在发送100-continue前收到了POST数据(客户端提前发送POST数据),则不发送100响应码(略去)。

 

 

参照/引用:

  1. Expect:100-Continue & HTTP 417 Expectation
  2. http之100-continue
  3. HTTP详解(3)-http1.0 和http1.1 区别
  4. Expect:100-continue
  5. ServicePointManager Class
  6. http1.1协议

javascript使iframe ajax填充时自适应高度

传统的iframe都是固定高度和宽度的;

后来稍微好点,固定子页面载入的时候可以自适应;

再后来ajax成灾,那么问题来了,怎么保证在ajax改变页面布局后还能自适应?

这段代码是从stackoverflow上找到的:

 

jQuery 1.9+兼容补丁库:jquery-migrate

jQuery从1.9版本开始,删除了很多方法,这样会导致以前的项目,或其他插件库依赖报错。
为解决后续带来的问题,jQuery发布了一个补丁给jQuery 1.9+后的版本,在引用jQuery后再引用这个:

即可以避免很多插件或浏览器报错。关于不支持的方法请看这里:

jQuery1.9的变更记录:http://jquery.com/upgrade-guide/1.9/
jQuery Migrate Github:https://github.com/jquery/jquery-migrate 最新1.2.1版本。

利用HTML5&AJAX验证表单(转)

stackoverflow上看到这段代码,很有用,不需要再找jquery的插件或自己写js来做验证,在提交时利用html5手动控制验证过程。

css3实现半透明和圆角

半透明:

圆角:

网页边距宽高备注

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width – border

clientHeight = height – border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

让Bootstrap菜单在鼠标悬停时自动展开(转)

在网页上用下面的CSS覆盖Bootstrap的CSS就行,但是要注意,平板和手机等触摸屏不支持悬停的,最好只覆盖桌面版的CSS。

原文:http://www.emoticode.net/css/how-to-make-bootstrap-dropdown-menu-expand-on-hover.html

参考:http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click

from:http://shaoning.net/?p=206

昨天跨域项目上线失败总结

昨晚预定上一个项目,主要功能是子域名向另一个子域名提交数据,失败症状是,页面我机器上ff和chrome上的样式全无,具体是js和css统统加载failed。跨域提交只能在IE下成功,ff和crhome下都失败。半夜回去查了资料,得知ff和chrome默认都有安全模式,禁止跨域提交,子域也不可以。 Continue reading “昨天跨域项目上线失败总结”

如何防止网站被百度wap端自动转码

用手机上百度搜索时,点击进入后大部分都是百度自己的页面,内容被拿过来格式化显示,点击“原始网页”才能进入原始网站,这样有些内容的格式会被破坏,并不是好事。好多网站为了防止这个,甚至做了验证码,近日查询到百度有一些规则来拒绝转码。

Continue reading “如何防止网站被百度wap端自动转码”