在html5之前在本地上传图片后预览的方法是,以前我们通常的做法是将选择的图片文件通过ajax上传至后端服务器,后端对其进行存储,再将图片的URL返回到前端,前端通过这个URL来显示图片。
而HTML5的FileReader接口支持本地预览,FileReader接口主要是将文件读入内存,并提供相应的方法,来读取文件中的数据,当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader接口,所以像IE6这些老东西直接滚粗。
HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,并且读取文件中数据。目前为止,firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象。它有以下5种方法:
readBinaryString
readAsText
readAsDataURL 将对象或文件中的数据读取为一串DataURL字符串,就是将数据以一种特殊格式的URL地址形式直接读入页面。
readAsArrayBuffer
- abort.
而我们现在要用的是第三种,所以解释了下,其他的具体可以看相关的资料,这里不多解释。
IE:document.selection 即资料解释如下:
selection 对象 代表了当前激活选中区,即高亮文本块,和/或文档中用户可执行某些操作的其它元素。
selection 对象的典型用途是作为用户的输入,以便识别正在对文档的哪一部分正在处理,或者作为某一操作的结果输出给用户。
用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用 select 方法。要获取当前选中区,请对 document 对象应用 selection 关键字。要对选中区执行操作,请先用 createRange 方法从选中区创建一个文本区域对象。
一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容,你仍然可以用它作为文档中的位置标志。
一、以前web页面上传以及展示图片原理说明
1. form表单选择图片 ——> 通过php上传存储在服务器端 ——> 服务器返回图片的url给前端页面 ——> 通过url前台展示图片(预览)
2. 如果预览之后不满意,就按照上面的流程重新上传修改预览
二、html5出现之后使用javascript实现FileReade接口
说明:在html5范围之内,通过FileReade接口可以直接先预览图片,然 后通过php上传存储在服务器
FileReader接口原理: 通过FileReader,可以异步地将本地图片文件加载到本地内存,然后赋予某个javascript变量。然后调用FileReader的readAsDataURL方法,通过将图片数据读取成Data URL的方法,将图片展示出来。
<