xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > 拖拽异步上传实现,应用的典型身份验证需求

拖拽异步上传实现,应用的典型身份验证需求

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-10-19 03:00

Chrome 控制台console的用法

2015/01/12 · JavaScript · Chrome

原文出处: ctriphire   

大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log

先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松的打开控制台

图片 1

大家可以看到控制台里面有一首诗还有其它信息,如果想清空控制台,可以点击左上角那个图片 2来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示

图片 3

现在假设一个场景,如果一个数组里面有成百上千的元素,但是你想知道每个元素具体的值,这时候想想如果你用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。

下面我们用console.log来替换,感受一下它的魅力。

图片 4

看了上面这张图,是不是认识到log的强大之处了,下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。

图片 5

目前控制台方法和属性有:

JavaScript

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

1
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

下面我们来一一介绍一下各个方法主要的用途。

一般情况下我们用来输入信息的方法主要是用到如下四个

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

5、console.debug用于输出调试信息

用图来说话

图片 6

console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种

JavaScript

console.log("%d年%d月%d日",2011,3,26); console.log("圆周率是%f",3.1415926);

1
2
console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

图片 7

%o占位符,可以用来查看一个对象内部情况

JavaScript

var dog = {}; dog.name = "大毛"; dog.color = "黄色"; console.log("%o", dog);

1
2
3
4
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

图片 8

6、console.dirxml用来显示网页的某个节点(node)所包含的html/xml代码**

JavaScript

<body> <table id="mytable"> <tr> <td>A</td> <td>A</td> <td>A</td> </tr> <tr> <td>bbb</td> <td>aaa</td> <td>ccc</td> </tr> <tr> <td>111</td> <td>333</td> <td>222</td> </tr> </table> </body> <script type="text/javascript"> window.onload = function () { var mytable = document.getElementById('mytable'); console.dirxml(mytable); } </script>

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
<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById('mytable');
        console.dirxml(mytable);
    }
</script>

图片 9

7、console.group输出一组信息的开头

8、console.groupEnd结束一组输出信息

看你需求选择不同的输出方法来使用,如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。

图片 10

哈哈,是不是觉得很神奇呀!

9、console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

图片 11

10、console.count(这个方法非常实用哦)当你想统计代码被执行的次数

图片 12

11、console.dir(这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

图片 13

12、console.time 计时开始

13、console.timeEnd  计时结束(看了下面的图你瞬间就感受到它的厉害了)

图片 14

14、console.profileconsole.profileEnd配合一起使用来查看CPU使用相关信息

图片 15

在Profiles面板里面查看就可以看到cpu相关使用信息

图片 16

15、console.timeLineconsole.timeLineEnd配合一起记录一段时间轴

16、console.trace  堆栈跟踪相关的调试

上述方法只是我个人理解罢了。如果想查看具体API,可以上官方看看,具体地址为:

 

下面介绍一下控制台的一些快捷键

1、方向键盘的上下键,大家一用就知晓。比如用上键就相当于使用上次在控制台的输入符号

2、$_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的

图片 17

上面的$_需要领悟其奥义才能使用得当,而$0~$4则代表了最近5个你选择过的DOM节点。

什么意思?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined

图片 18

3、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节点

图片 19

4、copy通过此命令可以将在控制台获取到的内容复制到剪贴板

图片 20

(哈哈 刚刚从控制台复制的body里面的html可以任意粘贴到哪 比如记事本  是不是觉得功能很强大)

5、keys和values 前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组

图片 21

说到这,不免想起console.table方法了

图片 22

 

 

File杂谈——拖拽异步上传实现

2015/07/25 · HTML5 · 异步上传

原文出处: 百码山庄   

在前一篇文章《File杂谈——拖拽上传前传》中我制作了一个静态的拖拽上传界面,拖拽文件到显示区域释放,可以显示拖入文件的基本信息。本文将在此基础上进一步加工,打造一个完整的拖拽上传示例。

登录工程:现代 Web 应用的典型身份验证需求

2017/02/18 · 基础技术 · WEB, 登录, 身份验证

本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

朋友就职于某大型互联网公司。前不久,在闲聊间我问他日常工作的内容,他说他所在部门只负责一件事,即用户与登录。

图片 23

而他的具体工作则是为各个业务子网站提供友好的登录部件(Widget),从而统一整个网站群的登录体验,同时也能令业务开发者不用花费额外的精力去关注用户鉴权。这很有趣。

可以看出,在一个现代Web应用中,围绕“登录”这一需求,俨然已经衍生出了一个新的工程。不管是我们面临的需求,还是解决这些需求所运用的方法与工具,都已经超出了传统Web应用身份验证技术的范畴。

在之前一篇文章中,我聊到传统Web应用中的身份验证技术,文章中列出的一些方法在之前很长一段时间内,为满足大量的Web应用中身份验证的需求提供了思路。在这篇文章里,我将简要介绍现代Web应用中几种典型的身份验证需求。

6、monitor & unmonitor

monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

图片 24

看了这张图,应该明白了,也就是说在monitor和unmonitor中间的代码,执行的时候会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。当解除监视(也就是执行unmonitor时)就不再在控制台输出信息了。

JavaScript

$ // 简单理解就是 document.querySelector 而已。 $$ // 简单理解就是 document.querySelectorAll 而已。 $_ // 是上一个表达式的值 $0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。 dir // 其实就是 console.dir keys // 取对象的键名, 返回键名组成的数组 values // 去对象的值, 返回值组成的数组

1
2
3
4
5
6
7
$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

 

下面看一下console.log的一些技巧

1、重写console.log 改变输出文字的样式

图片 25

2、利用控制台输出图片

图片 26

3、指定输出文字的样式

图片 27

最后说一下chrome控制台一个简单的操作,如何查看页面元素,看下图就知道了

图片 28

你在控制台简单操作一遍就知道了,是不是觉得很简单!

赞 6 收藏 评论

图片 29

示例说明

点击区域选择文件或直接将文件拖入区域,触发文件上传功能,文件将异步发送到服务器。待服务端处理完成后返回基本信息,在页面中显示。由于服务器容量问题,本示例未做文件保存处理,只是简单的将文件基本信息返回,文件上传的后端具体处理逻辑需要自行补充。

形式多样的鉴权

考虑这样一个场景:我们在电脑上登录了微软账号,电脑里的“邮件”应用能够自动同步邮件;我们登录Web版本的Outlook邮件服务,如果在邮件里发现了重要的工作安排,将其添加到日历中,很快电脑里的“日历”应用便能够将这些日程显示到Windows桌面上。

图片 30

这个场景包含了多个鉴权过程。至少涉及了对Web版本Outlook服务的鉴权,也涉及了对离线版本的邮件应用的鉴权。要能够支持同一批用户既能够在浏览器中登录,又能够在移动端或本地应用登录(例如 Windows UWP 应用程序),就需要开发出能够为两种应用程序服务的鉴权体系。

在浏览器里,我们通常假设用户不信任浏览器,用户通过与服务器建立的临时浏览器会话完成操作。会话开始时,用户被重定向到特定页面进行登录。登录完成后,用户通过持续与服务器交互来延续临时会话的时长;一旦用户一段时间不与服务器交互,则他的会话很快就会过期(被服务器强制登出)。

在移动应用中,情况有所不同。相对来说,安装在移动设备中的应用程序更受用户信任,移动设备本身的安全性也比浏览器更好。另一方面,将用户重定向到一个网页去登录的做法,并不能提供很好的用户体验——更重要的是,用户在使用移动设备时,时间是碎片化的。我们无法要求用户必须在特定时间内完成操作,也就基本没有会话的概念:我们需要找到一种能够安全地在设备中相对持久地存储用户凭据的方法,并且Web应用服务器可能需要配合这种方式来完成鉴权。此外,移动设备也不是绝对安全的,一旦设备丢失,将给用户带来安全风险。所以需要在服务器端提供一种机制来取消已登录设备的访问权限。

图片 31(图片来自:

新的小伙伴FormData

我们知道,传统的文件上传如果要实现异步的效果,我们会使用iframe去模拟,或使用flash上传插件。但是今天,我们又认识了一位新成员——FromData,它可以通过js创建表单对象,并可以向该对象中添加表单数据(字符串、数字、文件等)。再结合我们熟悉的XMLHttpRequest对象,将表单数据异步提交到服务端,这样我们的问题就解决了。

下面,我们来看下核心代码:

JavaScript

function uploadFile(fs) { var len = fs.length; for (var i = 0; i < len; i ) { sendFile(fs[i]); } } function sendFile(file) { var xhr = new XMLHttpRequest(), fd = new FormData(); fd.append('file', file); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 将服务端返回信息输出到日志区(考虑多文件情况) consoleDiv.innerHTML = '<br>' xhr.responseText; } }; xhr.open('POST', './upload.php'); xhr.send(fd); } // 文件控件发生变化时,调用uploadFile函数,触发上传功能 file.onchange = function() { uploadFile(this.files); }; // 在区域内释放拖入文件时,调用文件上传函数 area.ondrop = function(ev) { ev.preventDefault(); var dt = ev.dataTransfer; uploadFile(dt.files); };

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
function uploadFile(fs) {
    var len = fs.length;
    for (var i = 0; i < len; i ) {
        sendFile(fs[i]);
    }
}
function sendFile(file) {
    var xhr = new XMLHttpRequest(),
        fd = new FormData();
    fd.append('file', file);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 将服务端返回信息输出到日志区(考虑多文件情况)
            consoleDiv.innerHTML = '<br>' xhr.responseText;
        }
    };
    xhr.open('POST', './upload.php');
    xhr.send(fd);
}
// 文件控件发生变化时,调用uploadFile函数,触发上传功能
file.onchange = function() {
    uploadFile(this.files);
};
// 在区域内释放拖入文件时,调用文件上传函数
area.ondrop = function(ev) {
    ev.preventDefault();
    var dt = ev.dataTransfer;
    uploadFile(dt.files);
};

代码很简单,不再做过多阐述。但是这里我想发表一点个人意见:根据示例我们不难发现有这么一个问题——如果用户都使用拖拽上传功能,而不使用点击触发File控件选择文件上传,那么File控件完全没有存在的必要。联系上文中我提到的File控件的地位受到威胁这一观点,我大胆的设想,假如未来的某一项标准中给每个HTMLElement暴露一个选择文件的功能接口,那么拖拽和点选功能将可以集于一个元素之上,到那时File控件的地位恐怕不仅仅是受到威胁,很有可能退出历史舞台!出于File控件视觉效果和交互不统一的角度去考虑,我觉得以上推测还是有可能的,哈哈~~

虽然示例并未在后端做太多工作,我这里还是以PHP为例,说明一下后端该如何工作。单从示例而言,我的代码是这样的:

PHP

$file = $_FILES['file']; echo json_encode($file);

1
2
$file = $_FILES['file'];
echo json_encode($file);

可以说是非常简单了。而我们在实际应用中往往还会涉及更多更复杂的处理逻辑。最起码的我们应该要将tmp_name对应的临时文件移动到我们指定的上传目录吧。当然,这一过程我们就会对文件类型进行判断,大小限制,重命名,数据保存,等等。基本代码:

PHP

$file = $_FILES['file']; $path = './upload'; if ($file['size'] > 2000000) { echo '{"error": "1000", "message": "上传文件大小超限,不能超过xxM"}'; } $path .= '/file_' . time() . '.png'; // 这里还可能会存在文件数据保存,新旧名称关联等逻辑 move_uploaded_file($file['tmp_name'], $path);

1
2
3
4
5
6
7
8
$file = $_FILES['file'];
$path = './upload';
if ($file['size'] > 2000000) {
    echo '{"error": "1000", "message": "上传文件大小超限,不能超过xxM"}';
}
$path .= '/file_' . time() . '.png';
// 这里还可能会存在文件数据保存,新旧名称关联等逻辑
move_uploaded_file($file['tmp_name'], $path);

方便用户的多种登录方式

“输入用户名和密码”作为标准的登录凭据被广泛用于各种登录场景。不过,在Web应用、尤其是互联网应用中,网站运营方越来越发现使用用户名作为用户标识确实给网站提供了便利,但对用户来说却并不是那么有帮助:用户很可能会忘记自己的用户名。

用户在使用不同网站的过程中,为了不忘记用户名,只好使用相同的用户名。如果恰好在某个网站遇到了该用户名被占用的情况,他就不得不临时为这个网站拟一个新的用户名,于是这个新用户名很快就被忘记了。

在注册时,越来越多的网站要求用户提供电子邮箱地址或者手机号码,有的网站还支持让用户以多种方式登录。比如,提供一种让用户在使用了一种方式注册之后,还能绑定其他登录方式的功能。绑定完成之后,用户可以选用他喜欢的登录方式。它隐含了一个网站与用户共同的认知:联系方式的拥有者即为用户本人,这种“从属”关系能够用于证实用户的身份。当用户下次在注册新网站时遇到“邮件地址已被注册”,或者“手机号已被注册”的时候,基本可以确定自己曾经注册过这个网站了。

图片 32(图片来自:

另外,登录过程中所支持的联系方式也呈现出多样性。电子邮件服务在很多场景中逐渐被形式多样的其他联系方式(比如手机、微信等)所取代,不少人根本没有使用邮件的习惯,如果网站只提供邮箱注册的途径,有时候还会遭到那些不经常使用电子邮箱的用户的反感。所以支持多种登录方式成为了很多网站的迫切需求。

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:拖拽异步上传实现,应用的典型身份验证需求

关键词: PP电子游戏