图片上传进阶 VS 京东户簿实战

由于现在身份比较敏感,所以很多情况下你在网购时都会涉及到需要实名认证,此时就需要上传身份证照片。为了让大家能够在任何情况下都可以进行实名认证,前端的上传工作必不可少,如何进行图片上传的功能呢?下面会一步一步的深入到上传的海洋中,让你畅游其中。  京东推出了整站京东户簿组件,来统一管理用户的实名认证信息。此组件支持不同业务线跨域接入并兼容到 IE7+ 的不同场景。(黑科技)上传的图片支持 OCR 图像识别,可以与输入的证件号码做匹配,防止随便录入信息。 户簿系统组件的界面如下图: 接下来我们来逐步深入的剖析一下此组件的是如何来实现的。上传主要使用了 Ajax 与 XMLHttpRequest(文章中简称为 XHR ) 技术来实现。Ajax 介绍以及背景请参考Ajax 背景。 (如不了解  XHR ,可参考 w3.org 的一些文章基础教程文章即可快速了解,可参考如下连接地址:https://www.w3.org/TR/XMLHttpRequest/.) 上传图片功能实现 代码实现:

以上代码中,文件需要通过 FormData 来承载并通过 xhr 发送给服务端,FormData 会有哪些隐患呢?来看一下 XHR 的发展历程。  XHR 一开始只是微软浏览器提供的一个接口,后来各大浏览器纷纷效仿也提供了这个接口,再后来W3C对它进行了标准化,提出了 XHR 标准。XHR 标准又分为Level 1 和 Level 2。 XHR Level 1 中,XHR 有以下三个缺点: 只支持文本数据的传送,无法用来读取和上传二进制文件。 传送和接收数据时,没有进度信息,只能提示有没有完成。 受到“同域限制”(Same Origin Policy),只能向同一域名的服务器请求数据。 XHR Level 2 新版本针对老版本做出了大幅改进: 可以设置 http 请求的时限。 可以使用 FormData 对象管理表单数据。 可以上传文件。 可以请求不同域名下的数据(跨域请求)。 可以获取服务器端的二进制数据。 可以获得数据传输的进度信息。 FormData 参数为 […]

© 2017 JDC. All Rights Reserved.