2015第8周三马年除夕

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

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

知乎web框粘贴图片的实现方法

1. 抓包
   截个图，然后粘贴到编辑器，查看 HTTP 包，发现有对http://upload.zhihu.com/upload 的请求
   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 的方式发送到服务器，即实现了上传功能