`

html5上传图片

阅读更多

HTML5时代的纯前端上传图片预览及严格图片格式验证函数

 

一、要解决什么样的问题?

在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式。这在html5时代之前,那是不可能实现的,必须要上传到后台,由后台脚本读取文本流后进一步验证。这样就造成了一定的服务器资源浪费。但是html5时代,这个工作我们完全可以交给前端来做了。

另一方面,html5时代,许多我们原来的图片预览方案都失效了。究其原因,其实是现代浏览器出于对用户隐私的保护,file控件不再提供真实的物理地址,而统一变成:C:\fakepath\xxx.xxx 这样的假地址。不过,天无绝人之路,虽然旧的方案失效了,但是html5还是给我们提供了其它的途径的。

那么,以上的问题我们该怎么解决呢?这就要借助html5提供的File API了。这里我们需要要用到的API是“ FileReader ”。

二、关于FileReader

顾名思义,FileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存,以供js调用。

FileReader有四种读取文件的方式,四种方式的区别如下:
1. readAsBinaryString     ---- 将文件读取为二进制码

2. readAsDataURL  ---- 将文件读取为 DataURL

3. readAsText   ---- 将文件读取为文本

4. readAsArrayBuffer ----将文件读取为ArrayBuffer

因为还要做图片预览,所以我们这里将采用第二种readAsDataURL方式来读取文件。那么DataURL究竟是怎么样的一种格式呢?以下是截取的一个gif图片的DataURL格式。

[plain] view plaincopy在CODE上查看代码片派生到我的代码片
  1. data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH...oJCAcGBQQDAgEAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==  
所谓的DataURL格式,其实就是:data:[文件格式];base64,[文本流base64编码]

 

这种格式有什么好处呢?对于前端来说,最直观的好处就是,可以把它写进img标签的src,也可以写进css的background-image。这样就可以把一张图片直接塞进html代码或者css代码中,而不必再多一次http request。

讲到这里,很多童鞋或许已经对有点眉目了,接着往下看。

三、图片格式验证方案

做过后台验证文件格式的童鞋应该知道,许多文件格式,是有固定的文件头的(文件的文本流开头几个字节)。我们的JPEG、GIF、PNG等图片,也有这样的文件头。所以,我们现在就是要通过这个文件头来对图片格式进行严格验证,就在前端,纯JS,不需要借助任何后台脚本的帮助。

刚刚说到,readAsDataURL方式读取的文件,会得到文件文本流的base64编码。所以,我们其实只需要对比一下base64编码的头几个字符就可以知道我们将要上传的文件格式是什么样的。经过我的多次验证,JPEG、GIF、PNG的DataURL编码格式如下:

[plain] view plaincopy在CODE上查看代码片派生到我的代码片
  1. jpg格式如下:  
  2. data:image/jpeg;base64,/9j/4...  
  3.   
  4. png格式如下:  
  5. data:image/png;base64,iVBORw...  
  6.   
  7. gif格式如下:  
  8. data:image/gif;base64,R0lGOD...  
也就是说,jpeg图片的base64编码开头总是/9j/4,png的开头总是iVBORw,而gif的开头总是R0lGOD。所以,至此,我们的验证方案其实已经浮出水面了。

四、图片上传预览及验证函数

下面是综合上面说的所有知识我自己写的一个函数,在此提供给大家:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. function previewImage(file, prvid) {  
  2.     /* file:file控件 
  3.      * prvid: 图片预览容器 
  4.      */  
  5.     var tip = "Expect jpg or png or gif!"// 设定提示信息  
  6.     var filters = {  
  7.         "jpeg"  : "/9j/4",  
  8.         "gif"   : "R0lGOD",  
  9.         "png"   : "iVBORw"  
  10.     }  
  11.     var prvbox = document.getElementById(prvid);  
  12.     prvbox.innerHTML = "";  
  13.     if (window.FileReader) { // html5方案  
  14.         for (var i=0, f; f = file.files[i]; i++) {  
  15.             var fr = new FileReader();  
  16.             fr.onload = function(e) {  
  17.                 var src = e.target.result;  
  18.                 if (!validateImg(src)) {  
  19.                     alert(tip)  
  20.                 } else {  
  21.                     showPrvImg(src);  
  22.                 }  
  23.             }  
  24.             fr.readAsDataURL(f);  
  25.         }  
  26.     } else { // 降级处理  
  27.         if ( !/\.jpg$|\.png$|\.gif$/i.test(file.value) ) {  
  28.             alert(tip);  
  29.         } else {  
  30.             showPrvImg(file.value);  
  31.         }  
  32.     }  
  33.   
  34.     function validateImg(data) {  
  35.         var pos = data.indexOf(",") + 1;  
  36.         for (var e in filters) {  
  37.             if (data.indexOf(filters[e]) === pos) {  
  38.                 return e;  
  39.             }  
  40.         }  
  41.         return null;  
  42.     }  
  43.   
  44.     function showPrvImg(src) {  
  45.         var img = document.createElement("img");  
  46.         img.src = src;  
  47.         prvbox.appendChild(img);  
  48.     }  
  49. }  
使用示例:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <input id="files" type="file" onchange="previewImage(this, 'prvid')" multiple="multiple">  
  2. <div id="prvid">预览容器</div>  

 

五、兼容性

本函数兼容chrome、firefox、ie6+ 。 但由于ie9以下的浏览器并不支持FileReader,所以,在验证图片格式的时候,会有一个降级处理。

分享到:
评论

相关推荐

    html5 上传图片

    "html5 上传图片"这个主题涉及到HTML5中的一些关键特性,包括File API、Canvas以及使用Ajax进行无刷新上传。 1. **File API**: HTML5引入了File API,允许用户在不离开当前页面的情况下选择和操作本地文件。File ...

    HTML5上传图片预览

    HTML5上传图片预览是一项重要的前端技术,它允许用户在提交图片到服务器之前先进行预览,提升用户体验。这项功能是通过HTML5的新特性,尤其是File API和Canvas元素实现的。接下来,我们将深入探讨这个话题。 首先,...

    html5上传图片文件,图片文件转换为base64存入数据库

    这个是基于某个同志的资源...另外由于缓存资源的原因没有考虑上传按钮的添加,上传图片即上传,ajax为异步请求。 至于后台是C#没啥好看的,就是数据库插入 这里小小的向大家要1分,不要骂我,下东西都没分了,拜谢。

    html5上传图片编辑滤镜调色效果

    在这个"html5上传图片编辑滤镜调色效果"的主题中,我们将深入探讨HTML5如何实现图片的上传、编辑以及应用滤镜和调色功能。 首先,HTML5引入了`&lt;input type="file"&gt;`元素,用于在网页上实现文件选择和上传功能。用户...

    jquery html5上传图片插件头像截图图像截取上传表单

    总之,"jquery html5上传图片插件头像截图图像截取上传表单"是一个结合了jQuery强大功能和HTML5现代特性的前端开发实践。通过合理利用这些技术,开发者可以创建出功能强大、用户体验优良的图片上传组件,尤其适用于...

    html5手机页面选择相册图片上传表单提交

    HTML5在移动设备上的应用为用户提供了更丰富的交互体验,特别是在图片上传方面。"html5手机页面选择相册图片上传表单提交"是移动Web开发中的一个重要功能,它允许用户直接从手机相册中选取图片并提交到服务器,极大...

    Html5上传图片前本地预览

    HTML5在图片上传功能上引入了新的特性,使得用户在上传图片到服务器之前可以在本地进行预览,大大提升了用户体验。这一特性主要依赖于File API,包括`FileReader`对象和`&lt;input type="file"&gt;`元素的改进。下面将详细...

    html5上传图片拖动剪切头像截图插件代码

    总的来说,这个HTML5上传图片拖动剪切头像截图插件充分利用了HTML5的先进特性,为用户提供了一个方便且直观的头像编辑工具,无需复杂的后端处理,所有的操作都在客户端完成,提高了应用的响应速度和用户体验。

    html5手机端上传图片

    HTML5是现代网页开发的重要标准,它为网页应用带来了许多增强功能,其中之一就是对手机端图片上传的支持。在移动设备上,用户可能希望通过点击或拖拽来上传照片,或者从设备的媒体库中选择图片。以下是对这个主题的...

    html5上传图片转换成base64值传入后台,再转换为图片保存在服务器

    另外由于缓存资源的原因没有考虑上传按钮的添加,上传图片即上传,ajax为异步请求。 至于后台是C#没啥好看的,就是数据库插入。 后续更新成base64数据保存到数据库,直接base64转换成图片保存在服务器,数据库存储...

    HTML5上传图手机图片压缩

    HTML5上传图手机图片压缩是现代网页开发中的一个重要技术,特别是在移动设备日益普及的今天。这一功能使得用户可以在不离开浏览器的情况下,直接在网站上上传并压缩来自他们手机的图片,提高了用户体验,同时也减轻...

    HTML5 CSS3 :无插件拖拽上传图片实例源码

    在这个"HTML5 CSS3:无插件拖拽上传图片实例源码"中,我们重点关注的是利用HTML5的拖放(Drag and Drop)API以及File API来实现图片的无插件上传功能。这种技术使得用户可以通过直接在页面上拖动文件到指定区域,...

    html5上传视频和图片 可预览上传 手机端HTML5+js 多文件上传

    在这个场景中,我们关注的是HTML5在上传视频和图片方面的应用,特别是如何实现预览和多文件上传功能。 在HTML5中,`&lt;input type="file"&gt;`元素得到了极大的增强,它允许用户选择本地文件进行上传,并且可以通过...

    (最新版本)HTML5批量图片上传插件支持多个图片上传功能

    HTML5是一种先进的网页标记语言,它在传统的...综上所述,HTML5批量图片上传插件是通过利用HTML5的新特性,结合JavaScript和后端技术来实现的。它提升了用户体验,简化了开发者的工作,是现代网页开发中的重要一环。

    基于HTML5图片上传插件.zip

    这个名为"基于HTML5图片上传插件.zip"的压缩包文件,显然包含了一个使用HTML5技术实现的图片上传功能的插件源代码。下面我们将深入探讨HTML5在图片上传方面的应用以及与多媒体和游戏相关的知识点。 首先,HTML5中的...

    html5图片上传

    HTML5图片上传是一种基于Web的图像上传功能,利用HTML5的新特性,如File API和FormData对象,使得在浏览器端处理图像变得更加便捷和高效。在传统的Web应用中,图像上传通常依赖于服务器端脚本,而HTML5的这些新特性...

    html5手机上传图片尺寸裁剪代码.zip

    HTML5在移动设备上的应用越来越广泛,特别是在手机上传图片、图片尺寸裁剪和质量调整方面。这个"html5手机上传图片尺寸裁剪代码.zip"压缩包包含了一个实用的解决方案,适用于微信和其他手机网站,旨在处理用户拍照或...

    HTML5 图片上传 带预览功能 (pc,手机都能适配)

    HTML5图片上传带预览功能是一项重要的前端技术,它使得用户在网页上可以方便地选择并预览图片,然后再进行上传。这项技术充分利用了HTML5的新特性,如File API、FormData对象以及Canvas画布,实现了在PC和移动设备上...

    html5图片上传插件预览图片尺寸大小上传代码

    HTML5图片上传插件是现代网页开发中常用的一种功能,它允许用户在网站上选择并上传图片,同时提供预览和尺寸调整等便利性。在HTML5中,File API的引入使得开发者能够直接操作用户的本地文件,实现了无刷新的图片预览...

Global site tag (gtag.js) - Google Analytics