这篇文章主要为大家详细介绍了基于 JavaScript 实现本地图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!DOCTYPE html>
- <!--
- <!DOCTYPE html>一定要放在第一行,除非上面都是空行
- 在HTML规范中,单独存在的标签是不需要使用/来自我关闭的,比如<br>,<input>,<hr>等等这样的标签都是符合语法的.
- 在XHTML规范中,单独存在的标签要按照XML的语法规则进行自我关闭,上面三个标签就应写成<br />,<input />,<hr />
- -->
- <html>
- <head>
- <meta charset="utf8">
- <style>
- input[type=radio] {
- /* 按钮与文字对齐 */
- vertical-align:middle;
- }
- input[type=file] {
- display: block;
- }
- #img {
- width: 200px;
- height: 200px;
- border: 1px solid black;
- margin-top: 10px;
- }
- </style>
- </head>
- <body>
- <input type="radio" name="previewType" value="fileReader" onChange="onPreviewTypeChange()">fileReader
- <input type="radio" name="previewType" value="createURL" onChange="onPreviewTypeChange()">createURL
- <hr>
- <input type="file" id="imgFile" onChange="imgChange()" value="test.jpg">
- <img id="img">
- <script>
- var previewTypes = document.getElementsByName("previewType");
- var imgFile = document.getElementById("imgFile");
- var img = document.getElementById("img");
- function getPreviewType() {
- for(var i=0; i<previewTypes.length; i++) {
- if(previewTypes[i].checked) {
- return previewTypes[i].value;
- }
- }
- }
- function onPreviewTypeChange() {
- imgChange(event.target.value);
- }
- function imgChange(type) {
- img.src = "";
- var files = imgFile.files;
- console.log(files);
- if(!files || files.length === 0) {
- return;
- }
- var file = files[0];
- if(!type) {
- type = getPreviewType();
- if(!type) {
- return;
- }
- }
- switch(type) {
- case "fileReader":
- var fr = new FileReader();
- fr.onload = function(progressEvent) {
- console.log(progressEvent);
- img.src = progressEvent.target.result;
- }
- fr.readAsDataURL(file);
- break;
- case "createURL":
- img.onload = function() {
- //释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。
- URL.revokeObjectURL(img.src);
- }
- img.src = URL.createObjectURL(file);
- break;
- }
- }
- </script>
- </body>
- </html>
fileReader.readAsDataURL
URL.createObjectURL
可以看出 URL 实质上是以 "blob:" 打头的,后面跟着 32 位的 UUID(8-4-4-4-12)的结构。
来源: http://www.phperz.com/article/17/0610/327898.html