图片上传预览原理及实现
来源:互联网 发布:linux signal函数 编辑:程序博客网 时间:2024/06/06 04:47
目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便。一直以来也就只是用用,没有想过这些插件背后的实现原理。趁着今天有点时间,也来学习学习。
- 追根溯源
- 设想
- 原理
- DataURL浅析
- 格式
- 预览实现
- HTML
- JavaScript控制
- 预览效果
- 打包封装
- 简易封装
- 使用方式
- 测试
- 总结
- 追根溯源
追根溯源
设想
一开始,按照我的思路,预览可能是这么来实现的。本地选中一张图片,嵌入html的同时会显示图片的本地的绝对路径,然后通过js简单的进行设置,应该就可以实现预览效果了。
但是实际上,目前只有低版本的IE浏览器才能实现这么个效果。究其原因是浏览器厂商为了进一步强化安全,限制了file标签
直接读取本地路径的能力,在HTML5下只有通过FileReader的API来实现这一需求了。
比如对于CSDN写博客的时候上传一张图片,得到的只会是一个fakepath
。有图为证:
原理
FileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存,以供js调用。
FileReader有四种读取文件的方式:
readAsBinaryString读取为二进制码
readAsDataURL读取为 DataURL
readAsText读取为文本
readAsArrayBuffer
根据本次实现的目标,使用第二种方式即可。img标签的src就是这个图片的编码后的DataURL
。如图所示:
DataURL
浅析
DataURL
说来可是有很多内容要研究的,但是这次用的比较浅显,就把基础的了解下就行了。
格式
DataURL
有其固定的格式,如下:
data:[文件格式];base64,[文本流base64编码]。
举个例子:
jpg
格式:data:image/jpeg;base64,/9j/4...
png
格式:data:image/png;base64,iVBORw...
gif
格式:data:image/gif;base64,R0lGOD...
png
格式的图片编码信息
预览实现
好了,弄明白了这些原理性的东西,就可以着手进行实现了。
HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
在代码中使用了Html5的一些新特性。用来过滤待上传的图片格式。
JavaScript控制
接下来就是预览功能的实现了。目标就是将图片转换成DataURL,然后对预览区进行子元素的添加操作。
- 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
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 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
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
预览效果
总的来说代码就算是完成了,接下来看下实现的效果。由于没有设置样式,所以看起来很简陋,有兴趣的自己用样式控制一下即可。
打包封装
简易封装
为了方便实用,特使用原生JavaScript封装了一个这样的组件。详细代码如下:
- 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
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 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
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
使用方式
下面来一个简单的“模板式”使用技巧。
- 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
- 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
测试
为了保证这个组件的稳定性,接下来来个简单的测试。
- 首先是在Chrome浏览器上,发现可以正常工作。
接下来是在Edge浏览器上的测试。(发现样式不兼容)
不出所料,IE系的浏览器样式都没能兼容。
。。。
最终发现,Chrome等WebKit内核的浏览器可以完美支持,对于微软系浏览器而言,功能可以满足,但是样式上不兼容,这点可以通过特定的浏览器头来实现,不再过多叙述。
转自:http://blog.csdn.net/marksinoberg.
- 图片上传预览原理及实现
- 图片上传预览原理及实现
- 图片上传预览原理及实现
- JavaScript实现图片上传预览及进度条
- js实现图片上传预览及进度条
- js实现图片上传预览及进度条
- 图片上传及预览
- 实现图片上传预览
- 上传图片实现预览
- 上传图片,实现图片预览
- 上传图片实现图片预览
- 图片上传及预览插件
- 图片上传及预览效果
- mvc 上传图片及预览
- jQuery + ashx 实现图片按比例预览、异步上传及显示
- dwz+jquery+fileupload+springmvc实现文件上传及图片预览
- js实现前台多张图片上传及预览
- JFinal使用ajaxfileupload实现图片上传 及预览
- http get post 慢速攻击
- 带你了解----->BFC
- Hdu 5401 Persistent Link/cut Tree 树上分治/记忆化搜索
- RESTful
- 数据库乐观锁
- 图片上传预览原理及实现
- face ++ 实现人脸识别
- ZigBee CC2530 Z-Stack 18 单播通信1-16位地址模式
- cenots6.8部署java项目时用到的部分命令
- 你家的小程序那么优秀,快来这里进行海量曝光!
- boost静态断言记录
- 413. Arithmetic Slices
- [最长路(模板题)] poj1932 XYZZY
- Others11_曾经的招行“腿毛卡”与“腿毛卡”失效