深海游弋的鱼 – 第 2 页

CSS高度自适应铺满全屏

HTML:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>dddd</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
 
<body class="HolyGrail">
    <header>...</header>
    <div class="HolyGrail-body ">
        <main class="HolyGrail-content">...</main>
        <nav class="HolyGrail-nav">...</nav>
        <aside class="HolyGrail-ads">...</aside>
    </div>
    <footer>...</footer>
</body>

<!DOCTYPE html>

<html>

<head>

</head>

</div>

</body>

CSS:

.HolyGrail {
    display: flex;
    flex-direction: column;
    background-color: blueviolet;
}
 
header,
footer {
    height: 100px;
    background-color: aquamarine;
}
 
body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
}
 
.HolyGrail-body {
    flex: 1;
    background-color: brown;
}

.HolyGrail {

display: flex;

flex-direction: column;

background-color: blueviolet;

}

header,

footer {

height: 100px;

background-color: aquamarine;

}

body {

padding: 0;

margin: 0;

min-height: 100vh;

}

.HolyGrail-body {

flex: 1;

background-color: brown;

}

这里需要注意的是设置body的min-height: 100vh;以及margin: 0;

vw和vh

vm、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：取当前Vw和Vh中较小的那一个值
vmax：取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px，很容易实现与同屏幕等高的框。

参考链接

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

最近在浏览器（Chrome 85.0.4183.121）调试网页的时候，出现如下警告信息:

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests

22 cookies
3 requests
Learn more: SameSite cookies explained

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:

Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.

Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests

22 cookies

3 requests

Learn more: SameSite cookies explained

继续阅读Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

Vue理解v-model以及监听数据变化

最近在学习使用 Vue 开发简单的页面，界面库使用了 Quasar 。

由于刚刚开始接触 Vue，很多地方不熟悉，浪费了不少时间。

继续阅读Vue理解v-model以及监听数据变化

HTML实现点击图片放大功能

<html>
    <head>
        <style>
            .over {position: fixed; left:0; top:0; width:100%; z-index:100;}
            .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
        </style>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <body>
        <div class="over"></div><!--背景层-->
        <div class="amplifyImg"><!--注意：此处的amlifyImg不可少-->
            <img src="test.jpg"/><!-- 此处是引入图片的路径 -->
        </div>
        <script>
            $(document).ready(function () {
                var imgsObj = $('.amplifyImg img');//需要放大的图像
                if(imgsObj){
                    $.each(imgsObj,function(){
                        $(this).click(function(){
                            var currImg = $(this);
                            coverLayer(1);
                            var tempContainer = $('<div class=tempContainer></div>');//图片容器
                            with(tempContainer){//width方法等同于$(this)
                                appendTo("body");
                                var windowWidth=$(window).width();
                                var windowHeight=$(window).height();
                                //获取图片原始宽度、高度
                                var orignImg = new Image();
                                orignImg.src =currImg.attr("src") ;
                                var currImgWidth= orignImg.width;
                                var currImgHeight = orignImg.height;
                                if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
                                    if(currImgHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgHeight)/2;
                                        if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('<img border=0 src=' + currImg.attr('src') + '>');
                                    }else{
                                        css('top',0);
                                        html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
                                    }
                                }else{
                                    var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
                                    if(currImgChangeHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgChangeHeight)/2;
                                        if(topHeight>35){
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
                                    }else{
                                        css('top',0);
                                        html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
                                    }
                                }
                            }
                            tempContainer.click(function(){
                                $(this).remove();
                                coverLayer(0);
                            });
                        });
                    });
                }
                else{
                    return false;
                }
                //使用禁用蒙层效果
                function coverLayer(tag){
                    with($('.over')){
                        if(tag==1){
                            css('height',$(document).height());
                            css('display','block');
                            css('opacity',1);
                            css("background-color","#FFFFFF");
                            css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度
                        }
                        else{
                            css('display','none');
                        }
                    }
                }
            });
        </script>
    </body>
</html>

<html>

<head>

<style>

.over {position: fixed; left:0; top:0; width:100%; z-index:100;}

.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}

</style>

</head>

<body>

</div>

$(document).ready(function () {

var imgsObj = $('.amplifyImg img');//需要放大的图像

if(imgsObj){

$.each(imgsObj,function(){

$(this).click(function(){

var currImg = $(this);

coverLayer(1);

var tempContainer = $('<div class=tempContainer></div>');//图片容器

with(tempContainer){//width方法等同于$(this)

appendTo("body");

var windowWidth=$(window).width();

var windowHeight=$(window).height();

//获取图片原始宽度、高度

var orignImg = new Image();

orignImg.src =currImg.attr("src") ;

var currImgWidth= orignImg.width;

var currImgHeight = orignImg.height;

if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图

if(currImgHeight<windowHeight){

var topHeight=(windowHeight-currImgHeight)/2;

if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/

topHeight=topHeight-35;

css('top',topHeight);

}else{

css('top',0);

}

html('<img border=0 src=' + currImg.attr('src') + '>');

}else{

css('top',0);

html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');

}

}else{

var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;

if(currImgChangeHeight<windowHeight){

var topHeight=(windowHeight-currImgChangeHeight)/2;

if(topHeight>35){

topHeight=topHeight-35;

css('top',topHeight);

}else{

css('top',0);

}

html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');

}else{

css('top',0);

html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');

}

tempContainer.click(function(){

$(this).remove();

coverLayer(0);

});

}

else{

return false;

}

//使用禁用蒙层效果

function coverLayer(tag){

with($('.over')){

if(tag==1){

css('height',$(document).height());

css('display','block');

css('opacity',1);

css("background-color","#FFFFFF");

css("background-color","rgba(0,0,0,0.7)" ); //蒙层透明度

}

else{

css('display','none');

}

});

</script>

</body>

</html>

参考链接

html实现点击图片放大功能

玩转HTML5 Video视频WebVTT字幕使用样式与制作

一、HTML5 Video视频与WebVTT字幕

HTML5 Video视频支持支持外挂字幕，文件后缀名是.vtt，称为WebVTT格式，专门的web字幕格式。使用很简单，用一个<track>元素即可，例如：

<video id="video">
    <source src="example.mp4" type="video/mp4">
    <track src="example.vtt" default>
</video>

</video>

只要src属性地址OK，同时有default属性，字幕就会生效。

您可以狠狠地点击这里：HTML5 video视频track加载WebVtt字幕demo

继续阅读玩转HTML5 Video视频WebVTT字幕使用样式与制作

Python简单实现WebSocket

实现一个简单的聊天室程序，代码如下：

#-*- coding:utf8 -*-

import threading
import hashlib
import socket
import base64

global clients
clients = {}

#通知客户端
def notify(message):
    for connection in clients.values():
        connection.send('%c%c%s' % (0x81, len(message), message))

#客户端处理线程
class websocket_thread(threading.Thread):
    def __init__(self, connection, username):
        super(websocket_thread, self).__init__()
        self.connection = connection
        self.username = username
    
    def run(self):
        print 'new websocket client joined!'
        data = self.connection.recv(1024)
        headers = self.parse_headers(data)
        token = self.generate_token(headers['Sec-WebSocket-Key'])
        self.connection.send('\
HTTP/1.1 101 WebSocket Protocol Hybi-10\r\n\
Upgrade: WebSocket\r\n\
Connection: Upgrade\r\n\
Sec-WebSocket-Accept: %s\r\n\r\n' % token)
        while True:
            try:
                data = self.connection.recv(1024)
            except socket.error, e:
                print "unexpected error: ", e
                clients.pop(self.username)
                break
            data = self.parse_data(data)
            if len(data) == 0:
                continue
            message = self.username + ": " + data
            notify(message)
            
    def parse_data(self, msg):
        v = ord(msg[1]) & 0x7f
        if v == 0x7e:
            p = 4
        elif v == 0x7f:
            p = 10
        else:
            p = 2
        mask = msg[p:p+4]
        data = msg[p+4:]
        return ''.join([chr(ord(v) ^ ord(mask[k%4])) for k, v in enumerate(data)])
        
    def parse_headers(self, msg):
        headers = {}
        header, data = msg.split('\r\n\r\n', 1)
        for line in header.split('\r\n')[1:]:
            key, value = line.split(': ', 1)
            headers[key] = value
        headers['data'] = data
        return headers

    def generate_token(self, msg):
        key = msg + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
        ser_key = hashlib.sha1(key).digest()
        return base64.b64encode(ser_key)

#服务端
class websocket_server(threading.Thread):
    def __init__(self, port):
        super(websocket_server, self).__init__()
        self.port = port

    def run(self):
        sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
        sock.bind(('127.0.0.1', self.port))
        sock.listen(5)
        print 'websocket server started!'
        while True:
            connection, address = sock.accept()
            try:
                username = "ID" + str(address[1])
                thread = websocket_thread(connection, username)
                thread.start()
                clients[username] = connection
            except socket.timeout:
                print 'websocket connection timeout!'

if __name__ == '__main__':
    server = websocket_server(9000)
    server.start()

#-*- coding:utf8 -*-

import threading

import hashlib

import socket

import base64

global clients

clients = {}

#通知客户端

def notify(message):

for connection in clients.values():

connection.send('%c%c%s' % (0x81, len(message), message))

#客户端处理线程

class websocket_thread(threading.Thread):

def __init__(self, connection, username):

super(websocket_thread, self).__init__()

self.connection = connection

self.username = username

def run(self):

print 'new websocket client joined!'

data = self.connection.recv(1024)

headers = self.parse_headers(data)

token = self.generate_token(headers['Sec-WebSocket-Key'])

self.connection.send('\

HTTP/1.1 101 WebSocket Protocol Hybi-10\r\n\

Upgrade: WebSocket\r\n\

Connection: Upgrade\r\n\

Sec-WebSocket-Accept: %s\r\n\r\n' % token)

while True:

try:

data = self.connection.recv(1024)

except socket.error, e:

print "unexpected error: ", e

clients.pop(self.username)

break

data = self.parse_data(data)

if len(data) == 0:

continue

message = self.username + ": " + data

notify(message)

def parse_data(self, msg):

v = ord(msg[1]) & 0x7f

if v == 0x7e:

p = 4

elif v == 0x7f:

p = 10

else:

p = 2

mask = msg[p:p+4]

data = msg[p+4:]

return ''.join([chr(ord(v) ^ ord(mask[k%4])) for k, v in enumerate(data)])

def parse_headers(self, msg):

headers = {}

header, data = msg.split('\r\n\r\n', 1)

for line in header.split('\r\n')[1:]:

key, value = line.split(': ', 1)

headers[key] = value

headers['data'] = data

return headers

def generate_token(self, msg):

key = msg + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'

ser_key = hashlib.sha1(key).digest()

return base64.b64encode(ser_key)

#服务端

class websocket_server(threading.Thread):

def __init__(self, port):

super(websocket_server, self).__init__()

self.port = port

def run(self):

sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)

sock.bind(('127.0.0.1', self.port))

sock.listen(5)

print 'websocket server started!'

while True:

connection, address = sock.accept()

try:

username = "ID" + str(address[1])

thread = websocket_thread(connection, username)

thread.start()

clients[username] = connection

except socket.timeout:

print 'websocket connection timeout!'

if __name__ == '__main__':

server = websocket_server(9000)

server.start()

测试页面：

<!--
@http://www.cnblogs.com/zhuweisky/p/3930780.html
-->
<!DOCTYPE html>
</html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>WebSocketTest</h3>
        <div id="login">
            <div>
                <input id="serverIP" type="text" placeholder="服务器IP" value="127.0.0.1" autofocus="autofocus" />
                <input id="serverPort" type="text" placeholder="服务器端口" value="9000" />
                <input id="btnConnect" type="button" value="连接" onclick="connect()" />
            </div>
            <div>
                <input id="sendText" type="text" placeholder="发送文本" value="I'm WebSocket Client!" />
                <input id="btnSend" type="button" value="发送" onclick="send()" />
            </div>
            <div>
                <div>
                    来自服务端的消息
                </div>
                <textarea id="txtContent" cols="50" rows="10" readonly="readonly"></textarea>
            </div>
        </div>
    </body>
    <script>
        var socket;

        function connect() {
            var host = "ws://" + $("serverIP").value + ":" + $("serverPort").value + "/"
            socket = new WebSocket(host);
            try {

                socket.onopen = function (msg) {
                    $("btnConnect").disabled = true;
                    alert("连接成功！");
                };

                socket.onmessage = function (msg) {
                    if (typeof msg.data == "string") {
                        displayContent(msg.data);
                    }
                    else {
                        alert("非文本消息");
                    }
                };

                socket.onclose = function (msg) { alert("socket closed!") };
            }
            catch (ex) {
                log(ex);
            }
        }

        function send() {
            var msg = $("sendText").value
            socket.send(msg);
        }

        window.onbeforeunload = function () {
            try {
                socket.close();
                socket = null;
            }
            catch (ex) {
            }
        };

        function $(id) { return document.getElementById(id); }

        Date.prototype.Format = function (fmt) { //author: meizz 
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        function displayContent(msg) {
            $("txtContent").value += "\r\n" +new Date().Format("yyyy/MM/dd hh:mm:ss")+ ":  " + msg;
        }
        function onkey(event) { if (event.keyCode == 13) { send(); } }
    </script>
</html>

<!--

@http://www.cnblogs.com/zhuweisky/p/3930780.html

-->

<!DOCTYPE html>

</html>

<head>

</head>

<body>

<h3>WebSocketTest</h3>

<div>

</div>

<div>

</div>

<div>

来自服务端的消息

</div>

</div>

</body>

var socket;

function connect() {

var host = "ws://" + $("serverIP").value + ":" + $("serverPort").value + "/"

socket = new WebSocket(host);

try {

socket.onopen = function (msg) {

$("btnConnect").disabled = true;

alert("连接成功！");

};

socket.onmessage = function (msg) {

if (typeof msg.data == "string") {

displayContent(msg.data);

}

else {

alert("非文本消息");

}

};

socket.onclose = function (msg) { alert("socket closed!") };

}

catch (ex) {

log(ex);

}

function send() {

var msg = $("sendText").value

socket.send(msg);

}

window.onbeforeunload = function () {

try {

socket.close();

socket = null;

}

catch (ex) {

}

};

function $(id) { return document.getElementById(id); }

Date.prototype.Format = function (fmt) { //author: meizz

var o = {

"M+": this.getMonth() + 1, //月份

"d+": this.getDate(), //日

"h+": this.getHours(), //小时

"m+": this.getMinutes(), //分

"s+": this.getSeconds(), //秒

"q+": Math.floor((this.getMonth() + 3) / 3), //季度

"S": this.getMilliseconds() //毫秒

};

if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

for (var k in o)

if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

return fmt;

}

function displayContent(msg) {

$("txtContent").value += "\r\n" +new Date().Format("yyyy/MM/dd hh:mm:ss")+ ": " + msg;

}

function onkey(event) { if (event.keyCode == 13) { send(); } }

</script>

</html>

参考链接

python简单实现websocket

原生JS写Ajax的请求函数

一般我们写网页的时候，如果用到Ajax请求服务器，都是使用JQuery等已经封装好的库来调用，比较简单。

但是一般这些库的功能很多，引入了太多我们用不到的东西，如果我们需要写一个功能单一，简单的页面，完全用不到引用如此庞大的库文件。

我们可以简单实现一个自己的Ajax请求功能，具体的代码如下：

var ajax = {};
ajax.x = function () {
	if (typeof XMLHttpRequest !== 'undefined') {
		return new XMLHttpRequest();
	}
	var versions = [
	"MSXML2.XmlHttp.6.0",
	"MSXML2.XmlHttp.5.0",
	"MSXML2.XmlHttp.4.0",
	"MSXML2.XmlHttp.3.0",
	"MSXML2.XmlHttp.2.0",
	"Microsoft.XmlHttp"
	];

	var xhr;
	for (var i = 0; i < versions.length; i++) {
		try {
			xhr = new ActiveXObject(versions[i]);
			break;
		} catch (e) {
		}
	}
	return xhr;
};

ajax.send = function (url, method, data, success,fail,async) {
	if (async === undefined) {
		async = true;
	}
	var x = ajax.x();
	x.open(method, url, async);
	x.onreadystatechange = function () {
		if (x.readyState == 4) {
			var status = x.status;
			if (status >= 200 && status < 300) {
				success && success(x.responseText,x.responseXML)
			} else {
				fail && fail(status);
			}
			
		}
	};
	if (method == 'POST') {
		x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	}
	x.send(data)
};

ajax.get = function (url, data, callback, fail, async) {
	var query = [];
	for (var key in data) {
		query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
	}
	ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)
};

ajax.post = function (url, data, callback, fail, async) {
	var query = [];
	for (var key in data) {
		query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
	}
	ajax.send(url,'POST', query.join('&'), callback, fail, async)
};

var ajax = {};

ajax.x = function () {

if (typeof XMLHttpRequest !== 'undefined') {

return new XMLHttpRequest();

}

var versions = [

"MSXML2.XmlHttp.6.0",

"MSXML2.XmlHttp.5.0",

"MSXML2.XmlHttp.4.0",

"MSXML2.XmlHttp.3.0",

"MSXML2.XmlHttp.2.0",

"Microsoft.XmlHttp"

];

var xhr;

for (var i = 0; i < versions.length; i++) {

try {

xhr = new ActiveXObject(versions[i]);

break;

} catch (e) {

}

return xhr;

};

ajax.send = function (url, method, data, success,fail,async) {

if (async === undefined) {

async = true;

}

var x = ajax.x();

x.open(method, url, async);

x.onreadystatechange = function () {

if (x.readyState == 4) {

var status = x.status;

if (status >= 200 && status < 300) {

success && success(x.responseText,x.responseXML)

} else {

fail && fail(status);

}

};

if (method == 'POST') {

x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

}

x.send(data)

};

ajax.get = function (url, data, callback, fail, async) {

var query = [];

for (var key in data) {

query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));

}

ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)

};

ajax.post = function (url, data, callback, fail, async) {

var query = [];

for (var key in data) {

query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));

}

ajax.send(url,'POST', query.join('&'), callback, fail, async)

};

使用方法：GET

ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {
	//success
},
function(status){
	//fail
});

ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {

//success

function(status){

//fail

});

POST

ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {
	//succcess

},function(status){
	//fail
	
});

ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {

//succcess

},function(status){

//fail

});

这里需要注意一个问题，如果我们想要发送类似

http://www.mobibrw.com/control?op_code=code&op_cmd=cmd

1	http://www.mobibrw.com/control?op_code=code&op_cmd=cmd

的URL，是不能通过上面的发送方式（字段填写在data参数中）发送的，上面的发送方式是属于表单的上传方式。

我们需要用下面的方式进行处理（自己拼凑URL）

var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;
ajax.post('/control' + sendCmd,'',function(response,xml) {
   console.log('success');
},
function(status){
   console.log('failed:' + status);
});

var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;

ajax.post('/control' + sendCmd,'',function(response,xml) {

console.log('success');

function(status){

console.log('failed:' + status);

});

参考链接

禁止Chrome的页面缓存

Chrome总是缓存页面，Internet Explorer,FireFox,Opera都提供了自己方式可以关掉缓存,实在不行在HTTP头中加上 "Cache-Control"为"no-cache"，可是顽固的Chrome无效，依旧自动缓存。现在新版的Chrome在Developer Tools（F12调出来）的Network标签中有了个Disable cache选项，可以解决这类问题。

如下图：

参考链接

HTML5文件实现拖拽上传

通过HTML的文件API ，Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件，并上传到服务器。

相对于使用了十多年的HTML表单，这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中，但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便，而需要大量上传文件的CMS（内容管理系统）也将会从中受益。

让我们看一下Firefox 是如何使用拖拽上传功能的：

首先提供一个区域来放置文件

Html代码

<div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div>

1	<div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div>

然后监听拖拽过程中的dragenter,dragleave,drop等事件

Js代码

document.addEventListener("dragenter", function(e){  
    dropbox.style.borderColor = 'gray';  
}, false);  
document.addEventListener("dragleave", function(e){  
    dropbox.style.borderColor = 'silver';  
}, false);  
dropbox.addEventListener("dragenter", function(e){  
    dropbox.style.borderColor = 'gray';  
    dropbox.style.backgroundColor = 'white';  
}, false);  
dropbox.addEventListener("dragleave", function(e){  
    dropbox.style.backgroundColor = 'transparent';  
}, false);  
dropbox.addEventListener("dragenter", function(e){  
    e.stopPropagation();  
    e.preventDefault();  
}, false);  
dropbox.addEventListener("dragover", function(e){  
    e.stopPropagation();  
    e.preventDefault();  
}, false);  
dropbox.addEventListener("drop", function(e){  
    e.stopPropagation();  
    e.preventDefault();  
       
    handleFiles(e.dataTransfer.files);  
       
    submit.disabled = false;  
}, false);

document.addEventListener("dragenter", function(e){

dropbox.style.borderColor = 'gray';

}, false);

document.addEventListener("dragleave", function(e){

dropbox.style.borderColor = 'silver';

}, false);

dropbox.addEventListener("dragenter", function(e){

dropbox.style.borderColor = 'gray';

dropbox.style.backgroundColor = 'white';

}, false);

dropbox.addEventListener("dragleave", function(e){

dropbox.style.backgroundColor = 'transparent';

}, false);

dropbox.addEventListener("dragenter", function(e){

e.stopPropagation();

e.preventDefault();

}, false);

dropbox.addEventListener("dragover", function(e){

e.stopPropagation();

e.preventDefault();

}, false);

dropbox.addEventListener("drop", function(e){

e.stopPropagation();

e.preventDefault();

handleFiles(e.dataTransfer.files);

submit.disabled = false;

}, false);

其中最主要的是drop事件中用handleFiles()依次处理所有文件

handleFiles = function(files) {  
    for (var i = 0; i < files.length; i++) {  
        var file = files[i];  
   
    }  
}

handleFiles = function(files) {

for (var i = 0; i < files.length; i++) {

var file = files[i];

}

对于图片类型的文件可以直接读取内容，显示预览图

if (!file.type.match(/image*/)) {  
    continue;  
}  
   
var img = document.createElement("img");  
img.classList.add("obj");  
img.file = file;  
preview.appendChild(img);  
   
var reader = new FileReader();  
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);  
reader.readAsDataURL(file);

if (!file.type.match(/image*/)) {

continue;

}

var img = document.createElement("img");

img.classList.add("obj");

img.file = file;

preview.appendChild(img);

var reader = new FileReader();

reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);

reader.readAsDataURL(file);

接下来就是核心功能：ajax上传。首先新建一个XHR请求

var xhr = new XMLHttpRequest();  
xhr.open('post', '/file/upload', true);

1 2	var xhr = new XMLHttpRequest(); xhr.open('post', '/file/upload', true);

监听上传进度和完成事件

xhr.upload.addEventListener("progress", function(e) {  
    if (e.lengthComputable) {  
        var percentage = Math.round((e.loaded * 100) / e.total);  
        img.style.opacity = 1-percentage/100.0;  
    }  
}, false);  
   
xhr.upload.addEventListener("load", function(e){  
       
}, false);

xhr.upload.addEventListener("progress", function(e) {

if (e.lengthComputable) {

var percentage = Math.round((e.loaded * 100) / e.total);

img.style.opacity = 1-percentage/100.0;

}

}, false);

xhr.upload.addEventListener("load", function(e){

}, false);

最后把数据模拟成multipart/form-data的格式上传

xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.  
xhr.setRequestHeader("Content-Length", fileSize);  
   
var body = '';  
body += "--" + boundary + "\r\n";  
body += "Content-Disposition: form-data; name=\""+dropbox.getAttribute('name')+"\"; filename=\"" + fileName + "\"\r\n";  
body += "Content-Type: "+fileType+"\r\n\r\n";  
body += fileData + "\r\n";  
body += "--" + boundary + "--\r\n";  
   
xhr.sendAsBinary(body);

xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.

xhr.setRequestHeader("Content-Length", fileSize);

var body = '';

body += "--" + boundary + "\r\n";

body += "Content-Disposition: form-data; name=\""+dropbox.getAttribute('name')+"\"; filename=\"" + fileName + "\"\r\n";

body += "Content-Type: "+fileType+"\r\n\r\n";

body += fileData + "\r\n";

body += "--" + boundary + "--\r\n";

xhr.sendAsBinary(body);

参考链接

HTML5文件实现拖拽上传

2024 年 11 月
一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30