码迷,mamicode.com
首页 > 其他好文 > 详细

2015第8周三马年除夕

时间:2015-02-18 15:13:02      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

今天马年除夕,又到了各种拜年送祝福的时候,祝福大家身体健康,万事如意,羊年大吉,红包多多,运气好好!

最后摘录一些刚才看到的html5的知识

知乎web框粘贴图片的实现方法
  1. 抓包
    截个图,然后粘贴到编辑器,查看 HTTP 包,发现有对 的请求
    request 的格式是multipart/form-data; 图片的内容作为request body 的一部分一起传了过去
    这里大概就能推测出基本原理了:监听粘贴 → 获取粘贴内容 → 将内容上传
  2. 搜索代码
    在 rich_text_editor.js 里面搜索 /upload 字样,搜到了这么一段
    this.Vz = "http://upload." + Ak.Sl + ":" + location.port + "/upload";
    
    估计是设置属性,那么再搜 .Vz 看看哪里用到了,于是看到
    function zE(a, b) {
        var c = new FormData;
        c.append("via", "xhr2");
        c.append("upload_file", b);
        var d;
        d = $.ajaxSettings.xhr();
        d.withCredentials = i;
        var f = $.ajax({url: a.Vz,data: c,processData: l,contentType: l,xhr: function() {
                return d
            },type: "POST"}).done(function(a) {
    
    啊,找到了,这里应该就是发送图片数据的地方,而且用了 FormData 这个 HTML5 特性
    简单说就是 ajax 以前只能向服务器发送文本,而 HTML5 提供的 XMLHttpRequest Level2 现在支持发送二进制数据了,这里的 c.append("upload_file", b) 里面 b 应该就是那个图片的二进制数据
  3. 打断点
    继续追踪就容易多了,只要在这个地方打个断点,然后往编辑器里面粘贴一个截图
    Chrome 调试工具的 Call Stack 就会告诉你,程序的上一步在哪里
    技术分享看一看 a 对象的属性基本可以断定它是一个 Event 对象,而且这里的这段 function 就是对粘贴事件的处理,为了验证,搜索一下 .rw 就会看到这样一段 
    a.f().addEventListener("paste", u(this.rw, this));
    
    确定推断无误,可以看到上面的处理函数中,通过 a.clipboardData 就能取到剪贴板中的数据,并且可以通过 clipboardData.types 来判断数据是不是图片。
    这么高级的 API 是哪里来的呢?搜一下就知道了 Clipboard API and events
    可以看到这个 API 属于 W3C 的标准(当然还是草案阶段),但是不属于 HTML5 
    另外代码中的重点是这么一段
    c.type.indexOf("image") && (zE(b, c.getAsFile()), a.preventDefault())
    
    zE 就是上面的那个 ajax 发送函数,而通过 c.getAsFile() 可以从剪贴板中获取二进制的数据

  4. 结论
    通过 Clipboard API 可以在用户粘贴时获知粘贴的内容,包括内容的格式(是否为图片),内容的二进制数据等等
    通过 XMLHttpRequest Level2 可以实现将二进制数据以 ajax 的方式发送到服务器,即实现了上传功能

2015第8周三马年除夕

标签:

原文地址:http://www.cnblogs.com/doit8791/p/4295760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!