标签:als 文件上传 tle OLE 宽度 map segment meta weixin
步骤 WEB平台 手机
第1步 生成二维码
第2步 (ajax监控后台) 扫码
第3步 (ajax监控后台) 确定(后台异步通知WEB平台)
第4步 AJAX发现状态改变,登陆成功
ajax监控后台的流程:生成二维码后
setTimeout(function(){
//AJAX请求,检测状态
},5000);
整体思路:
微信与支付宝的扫码登录是有一些区别的,微信目前是一个持续27s的长连接请求;而支付宝是持续循环的短连接请求。其实原理是一样的。
首先,前端调用二维码接口,获取图片二维码以及用户唯一表示uid,然后与服务器建立长连接请求,询问是否有用户扫码登录。
用户用APP扫码之后,会请求服务器接口,将用户信息与二维码的uid绑定,前端的长连接就可以请求到当前uid对应的用户,从而进行登录操作。
前端的长连接请求类似以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<div id="divCon">
<img src="" id="QrCodeImg" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
var uuid = 131422035;
function validateLogin(){
$.get("/walletadminV2/api/testServlet/testLogin?uuid=" + uuid , function(data, status) {
if(data == ""){
validateLogin();
}else{
var obj = eval("(" + data + ")");
alert("登录成功了:" + obj.uname);
}
});
}
validateLogin();
});
</script>
</html>
问题地址:web扫码登录怎么实现,求个思路
为什么在input标签类型为file上传文件时在标签中设置属性 accpet="image/*"
,打开本地文件夹的速度特别慢?
经过测试发现,在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有卡顿问题
在windows里面,Firefox不卡顿,只有Chrome卡顿。
于是我决定先去掉accpet
试试……
果然就没有了卡顿的问题。
那么本包在试试accpet="image/jpg"
果然也不卡卡的了!!
看来问题的所在就是"image/*"
但是写accpet
的原意是要想要筛选出所有图片_(:з」∠)_
那么为了实现这个需求,同时提高用户体验,只能采取枚举了
修改后的代码
<input type ="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"/>
再试试,果然妥妥的了!
原来是因为Chrome的SafeBrowsing功能会在上传或保存时检查文件,
如果网络连接到google的速度比较快呢,就没有什么问题。
但是如果连接比较慢,或者干脆跪掉了,那SafeBrowsing就会让Chrome挂起一段时间,直到文件检查结束或者超时
使用accept="image/png, image/jpeg, image/gif"
就可以解决这个问题,因为这些MIME类型在SafeBrowsing的白名单里面,不需要检查。
但是如果用像是accept="image/*"
这样的呢,就不行了,就有可能变得卡卡的。
解决跨域的解决办法有多种,比如jsonp,或者apache 或者nigix里面配置,或者后端的php或者java中配置 cross orgion。
在网上搜了一圈,发现处理方式都差不多,但是我们得清楚这些到底怎么用。
先看下这段代码:
<?xml version="1.0"?> <cross-domain-policy> <allow-access-from domain="*" /> </cross-domain-policy>
这段代码作用是啥,其实这个是解决flash跨域的解决办法。
看淘宝的使用方式:
https://www.taobao.com/crossdomain.xml
<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
<allow-access-from domain="*.taobao.com" />
<allow-access-from domain="*.taobao.net" />
<allow-access-from domain="*.taobaocdn.com" />
<allow-access-from domain="*.allyes.com" />
</cross-domain-policy>
一般crossdomain.xml的位置是放到项目的根目录下。
下面举例关于字体跨域的解决方法:
直接了当了说,解决此类问题,最直接的方法就是,就是给被请求的服务器,添加HTTP头响应头,这里提供两种添加HTTP头的方法:
第一种,就是在程序中添加HTTP头:
如: Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{
‘Access-Control-Allow-Origin‘: ‘*‘,
}
// HTML
<meta http-equiv="Access-Control-Allow-Origin" content="*">
// PHP
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
添加此段代码的目的很简单,也就是告诉浏览器,这个资源是运行远程所有域名访问的。当然,此处的*也可以替换为指定的域名,出于安全考虑,建议将*替换成指定的域名。
第二种,就是在服务器上,添加HTTP响应头。在这里,我们就以IIS6.0为例:
在被请求的网站上,设置HTTP头,添加“
//在被请求的网站上,设置HTTP头,添加
"Access-Control-Allow-Origin:*" //值为*或指定的域名。
第三种,使用JSONP格式,即在jQuery中ajax请求参数dataType:‘JSONP‘:
<script>
$.ajax({
url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
type:‘GET‘,
dataType:‘JSONP‘, // 处理Ajax跨域问题
success: function(data){
$(‘body‘).append( "Name: " + data );
}
});
</script>
当然请求方式只能是get。
参考地址:关于跨域策略文件crossdomain.xml文件
浏览器拦截跨域请求处理方法(同源策略不允许读取XXX上的远程资源)
在请求的时候,一般在url后面都会添加一个时间戳,比如:
url:"/order/order.shtml?time="+new Date()
但是IE11却不进入这个ajax请求,在网上查了下,说IE不支持时间对象作为参数。
于是我改了一下:
url:"/order/order.shtml?time="+new Date().getTime()
如题所示:
<p id="p" draggable="true" ondragstart="dragStart(event)">sss</p> //ps:不加红显示不了p标签。
<div ondragover="dragOver(event)" style="width:100%;height:50px;"></div>
<script>
function dragOver(e){
stopDefault(e);
}
function stopDefault(e) {
var event = e||window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
</script>
在火狐下面还是新窗口打开一个页面。解决办法:
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
问题地址:https://segmentfault.com/q/1010000004689615
今天在论坛上看到这样一个问题,有必要编辑搜集下。
问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端
题主用jquery接收
<input name="c_pic" id="c_pic" type="file" class="file">
用的方法是:
var input = document.getElementById("c_pic");
input.addEventListener(‘change‘,readFile,false);
function readFile(){
var file = this.files[0];
}
题主想用ajax 的post方法把上传图片的相关信息传给后端,
接收到的file是个object file,
请问怎么转换成能够用post传递的数据格式?
当时我看到这个题目就想这还不简单,直接把file通过JSON.stringify(file)(注:stringify()用于从一个对象解析出字符串),代码如下:
var input = document.getElementById("c_pic");
input.addEventListener(‘change‘,readFile,false);
function readFile(){
var file = this.files[0];
var file_json = JSON.stringify(file);
console.log(file_json); //打印出来是: {}
$.post(‘‘,file_json);
}
发现打印出来的是一个空的对象:{};有知道的麻烦告知,感激不尽!
于是换了一种思路用uploadfile插件或百度的webuploader,其中jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。
如果支持html5,可以使用FormData
Ajax上传也能实现的。
最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题!
在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的marker,然后setPosition。但是我的页面中匹配当前城市 注入marker也没有几个,所以排除这答案。
最后发现有网友说版本不稳定引起的,于是把百度地图API回退到了1.5,结果还真是可以了。
百度地图API调用:<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=dGg7NKEkMCp8j1pWHCHZ3nhk"></script>
问题参考地址:http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=84541
最近的有关项目需要使用video标签播放视频,并且视频的路径src是优酷里面的视频,所以需要得到优酷里面的mp4路径才能播放。
但是在网上查了下资料,看到优酷的播放格式是一个m3u8文件.
M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。
请问在移动端页面中播放优酷里面的视频,怎样实现?
文章地址:http://www.cnblogs.com/moqiutao/p/4754232.html
文章地址:http://www.cnblogs.com/moqiutao/p/4830438.html
文章地址:http://www.cnblogs.com/moqiutao/p/6508237.html
原因: 因为各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放;
/音频,写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
//音频,写法二
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
优先播放音乐bg.ogg,不支持在播放bg.mp3
</audio>
//JS绑定自动播放(操作window时,播放音乐)
$(window).one(‘touchstart‘, function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常;
//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间;
//3.注意不要遗漏微信的兼容处理需要引用微信JS;
标签:als 文件上传 tle OLE 宽度 map segment meta weixin
原文地址:https://www.cnblogs.com/moqiutao/p/9872077.html