用于上传图片的js验证：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>图片效验</title> </head> <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script> <script type="text/javascript"> /* *图片验证 */ function photoCheck(obj){ var ff = $("#photoSrc").val(); if(ff == null || ff == ""){ alert("请选择文件"); return; }else if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(ff)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种"); return; } photo_flag = true; //设置限制图像的大小为10MB，这里你可以自己设置 var fSize = 1024 * 1024 *10; //限制图片宽高 var fHeight = 3000; var fWidth = 3000; var fileType; var fileSize; var filePath; var img = new Image(); //显示图片 if (obj.files) { //用来把文件读入内存，并且读取文件中的数据，要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。 var reader = new FileReader(); //获取文件的对像 var thisFile = obj.files[0]; //获取上传文件的类型，一般来说，如果类型是image/jpeg,.jpg,.gif等等图片格式的话就是合理的 fileType = thisFile.type; //获取当前上传的文件的大小 fileSize=thisFile.size; /*readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小 文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件*/ reader.readAsDataURL(thisFile); //文件读取成功完成时触发 reader.onloadend = function(event){ // 图像的路径 img.src = event.target.result; // 图片加载完毕后 img.onload = function(event) { //效验图片规格 specification(img); filePath = this.src; if(photo_flag){ //设置图片为当前上传的图片路径 $("#imgShow").attr("src", filePath); }else{ //否则设置默认的图片 $("#imgShow").attr("src", "default.jpg"); } } } }else{// 如果是ie浏览器 //选择当前全部文本内容 obj.select(); /* 为选择的内容创建一个Range对象，在.text转换成文本 什么是Range？https://my.oschina.net/122612475/blog/286302 所谓"Range"，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可 以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了 页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range */ var path = document.selection.createRange().text; img.src = path; //效验图片规格 specification(img); //取出文件后缀 var fileType = path.substring(path.length-4,path.length); if(img.readyState == "complete") { //图片加载完毕,获取图片的大小 fileSize = img.fileSize; }else{ //当的该对象的 load state 改变时，会触发此事件 img.onreadystatechange = function(){ // 当图片load完毕 if(img.readyState=='complete'){ fileSize = img.fileSize; if(fileSize > fSize){ photo_flag = false; $("#imgShow").attr("src", "default.jpg"); return; } } } } if (path) { filePath = path; } } //图片格式的判断 if( fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg" && fileType != ".png" && fileType != ".PNG" && fileType != "image/png" && fileType != ".gif" && fileType != ".GIF" && fileType != "image/gif" ){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种"); photo_flag = false; $("#imgShow").attr("src", "default.jpg"); return; } //效验图片内存大小 if(fileSize > fSize){ alert("图片太大了！"); photo_flag = false; $("#imgShow").attr("src", "default.jpg"); return; } if(photo_flag){ $("#imgShow").attr("src", filePath); } else { $("#imgShow").attr("src", "default.jpg"); } // 匿名函数:效验图片规格 var specification = function(image){ if(image.width >= fWidth || image.height >= fHeight){ alert("*提示：文件大小不对。您只能上传小于等于"+fWidth+"*"+fHeight+"尺寸的图片"); $("#imgShow").attr("src", "default.jpg"); return; } } } </script> <body> <input type="file" name="usertx" id="photoSrc" value="文件上传" onchange="photoCheck(this)"/> <div> //显示图片的div <img src="" id="imgShow" style="100px;height:100px"></img> </div> </body> </html>
如果是在chrome（谷歌浏览器）下上传的头像的话，我们查看的起src路径会发现 发现该方法将文件读取为一段以 data: 开头的字符串，像上面描述的一样，正是FileReader中readAsDataURL的作用，下面介绍下FileReader
| 方法名 | 参数 | 描述 |
|---|---|---|
| abort | none | 中断读取 |
| readAsBinaryString | file | 将文件读取为二进制码 |
| readAsDataURL | file | 将文件读取为 DataURL |
| readAsText | file, [encoding] | 将文件读取为文本 |
readAsText： 该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString： 它将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL： 这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小文件直接嵌入文档的方
案。这里的小文件通常是指图像与 html 等格式的文件 FileReader还有以下的事件
| 事件 | 描述 |
|---|---|
| onabort | 中断时触发 |
| onerror | 出错时触发 |
| onload | 文件读取成功完成时触发 |
| onloadend | 读取完成触发，无论成功或失败 |
| onloadstart | 读取开始时触发 |
| onprogress | 读取中 |
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
本文参考：喜youngyoung