AjaxWEB之广大专门的学问难点计算(壹-20)

⑨.网页中插入FLASH(swf文件),并且让Flash不遮挡HTML成分

小说地址:http://www.cnblogs.com/moqiutao/p/4754232.html

六.怎么通过js获取上传的图样音讯(权且保存路径,名称,大小)然后经过ajax传递给后端?

前几日在论坛上见到那般一个难点,有不可或缺编采下。

主题材料讲述:怎么通过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图片上传组件,协理多文件上传、裁撤、删除,上传前缩略图预览、列表显示图片大小,援助上传进程条展现;援救各个动态语言开辟的劳务器端。
万1协助html5,能够使用FormData Ajax上传也能落到实处的。

四.Ajax造访后端的时候,唯有IE报400谬误化解办法

在伸手的时候,一般在url前边都会增加贰个年华戳,比方:

url:"/order/order.shtml?time="+new Date()

而是IE1一却不进来那么些ajax请求,在网络查了下,说IE不协理时间对象作为参数。

于是本身改了瞬间:

url:"/order/order.shtml?time="+new Date().getTime()

十.什么样禁止 金立 Safari video标签录制自动全屏?

小说地址:http://www.cnblogs.com/moqiutao/p/4830438.html

一.web扫码登入怎么落到实处,思路?

步骤       WEB平台                手机
第1步      生成二维码
第2步     (ajax监控后台)          扫码
第3步     (ajax监控后台)          确定(后台异步通知WEB平台)
第4步      AJAX发现状态改变,登陆成功

ajax监察和控制后台的流水生产线:生成二维码后

setTimeout(function(){
    //AJAX请求,检测状态
},5000);

完全思路:

  • 壹.前端调用后台湾学生成二维码的API,获取到2维码图片和所包蕴的音讯(平常是3个唯一ID)
  • 二.前端检查测试(通过轮询恐怕websock,本身挑选)是或不是有部手提式有线电话计算机扫描码,通过调用后台接口API,参数为地方的唯一ID
  • 3.手提式有线电话计算机扫描描2维码登入,手提式有线电话机端能够博得到2维码里的消息ID,带受骗前登录用户ID和2维码里的ID调用后台接口。后台存款和储蓄这些贰维码的多少,加上登入用户音信,当前台调用API时,给再次回到登入成功。
  • 四.前端获取到登6成功,实行跳转

微信与支付宝的扫码登陆是有1对组别的,微信近来是3个缕缕2七s的长连接请求;而支付宝是绵绵循环的短连接请求。其实原理是同样的。

率先,前端调用2维码接口,获取图片贰维码以及用户唯一代表uid,然后与服务器建立长连接请求,询问是或不是有用户扫码登录。

用户用应用程式扫码之后,会呈请服务器接口,将用户新闻与二维码的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扫码登入怎么落到实处,求个思路

1壹.JS不可能得到display为none的隐藏元素的宽窄和冲天的消除方案

小说地址:http://www.cnblogs.com/moqiutao/p/6508237.html

 伍.html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下无效?

如题所示:

<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

3.浏览器拦截跨域请求管理措施

杀鸡取卵跨域的化解办法有三种,比方jsonp,或许apache 大概nigix里面配备,也许后端的php或许java中布署cross orgion。

在英特网搜了一圈,发掘处理格局都大致,不过大家得清楚那些到底怎么用。

先看下那段代码:

<?xml version="1.0"?>
<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

那段代码功能是啥,其实那些是消除flash跨域的消除办法。

看Tmall的施用办法:

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响应头。在此地,大家就以IIS陆.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上的中远距离能源)

捌.如何赚取优酷站内摄像的mp5格式地址,嵌入到手提式有线电电话机页面播放(未缓和)

近年来的有关项目须要动用video标签播放录像,并且摄像的不二等秘书诀src是优酷里面的录制,所以须求取得优酷里面包车型大巴mp3路子能力播放。

而是在网络查了下资料,看到优酷的播音格式是多个m叁u八文件.

M三U捌文件是指UTF-八编码格式的M三U文件。M叁U文件是记录了八个索引纯文本文件,张开它时播放软件并不是广播它,而是依照它的目录找到相应的音摄像文件的互连网地址进展在线播放。

借问在活动端页面中播放优酷里面包车型地铁摄像,怎么样贯彻?

2.解决input[type=file]打开时慢、卡顿难点

干什么在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作用会在上传或保存时检查文件,
1经网络连接到google的速度极快吗,就从未有过什么难题。
不过壹旦老是不快,恐怕简直跪掉了,那SafeBrowsing就会让Chrome挂起一段时间,直到文件检查完结或许逾期

使用accept="image/png, image/jpeg, image/gif"就足以缓和那些主题材料,因为那几个MIME类型在SafeBrowsing的白名单里面,不必要检查。
只是纵然用像是accept="image/*"那样的吗,就非常了,就有希望变得卡卡的。

七.三星手机 微信调用百度地图Javascript API 频仍闪退难点

目前在网页中调用百度地图API js大众版,但是在IOS捌种类中,缩放的时候屡次闪退,安卓手提式有线电话机未有那些难题!

在网络查询了下,有网络好友答应说不要反复的去new
marker,而是开端化话一定量的marker,然后setPosition。可是自身的页面中分外当前都会
注入marker也未曾几个,所以排除这答案。

最后发掘有网上好友说版本不牢固引起的,于是把百度地图API回退到了一.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

相关文章