function photoCheck(obj){ var ff = $("#photoSrc").val(); if(ff == null || ff == ""){ return; } photo_flag = true; var fSize = 50.9 * 1024; var fileType; var fileSize; var filePath; if (obj.files) { // webkit, mozilla... (jq:$.support.boxModel) // ff & chrome var reader = new FileReader(); var thisFile = obj.files[0]; var isFirefox=navigator.userAgent.indexOf("Firefox"); //ff 下获取图片大小 fileType = thisFile.type; fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize; reader.readAsDataURL(thisFile); reader.onloadend = function(event) { var imgObj = new Image(); imgObj.src = event.target.result; // image src imgObj.onload = function(event) { filePath = this.src; if(photo_flag){ $("#imgShow").attr("src", filePath); } else { $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); } } } } else { ///////////////////////////////////////////// ie obj.select(); var path = document.selection.createRange().text; var img = new Image(); img.src = path; var fileType = path.substring(path.length-4,path.length); if(img.readyState == "complete") { fileSize = img.fileSize; } else { img.onreadystatechange=function(){ if(img.readyState=='complete'){//当图片load完毕 fileSize = img.fileSize; if(fileSize > fSize){ setMsg('photoSrc_msg', '图片太大了！', 'reg_wrong'); photo_flag = false; $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); return; } } } } if (path) { filePath = path; } } if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){//image/jpeg setMsg('photoSrc_msg', '图片格式错误！', 'reg_wrong'); photo_flag = false; $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); return; } if(fileSize > fSize){ setMsg('photoSrc_msg', '图片太大了！', 'reg_wrong'); photo_flag = false; $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); return; } setMsg('photoSrc_msg', '正确', 'reg_ok'); if(photo_flag){ $("#imgShow").attr("src", filePath); } else { $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); } }
用于上传图片的验证
下面讲解上面的代码：
下面是一个用户上传头像的格式和大小的验证的方法，在用户注册的时候要求用户上传头像的时候进行的验证。在方法中我给予了最详细的注释
<script type="text/javascript"> function photoCheck(obj){ var ff = $("#photoSrc").val(); //获取文件的路径 if(ff == null || ff == ""){ return; } photo_flag = true; var fSize = 50.9 * 1024;//设置图像的大小为50kb，这里你可以自己设置 var fileType; var fileSize; var filePath; if (obj.files) { // obj.files 是chrome，firefox等浏览器的对戏那个，如果是ie的话他的值就是false var reader = new FileReader(); //这个FileReader在稍后会进行较详细的描述，要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。 var thisFile = obj.files[0];//获取文件的对像 var isFirefox=navigator.userAgent.indexOf("Firefox"); //注意这个是判断当前用户使用的浏览器是哪一种，如果返回的值是大于0的话,那么表示浏览器是当前浏览器，例如isFirefox>0上诉的就是firefox fileType = thisFile.type; //获取文件的类型，一般来说，如果类型是image/jpeg,.jpg,.gif等等图片格式的话就是合理的 fileSize=thisFile.size;//获取当前上传的文件的大小 fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize; //如果是firefox,调用 reader.readAsDataURL(thisFile); // readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件 reader.onloadend = function(event) { //文件读取成功完成时触发 var imgObj = new Image(); imgObj.src = event.target.result; // 图像的路径 imgObj.onload = function(event) { // 图片加载完毕后 filePath = this.src; if(photo_flag){ $("#imgShow").attr("src", filePath); //设置图片为当前上传的图片路径 } else { $("#imgShow").attr("src", "default.jpg"); //否则设置默认的图片 } } } } else { //如果是ie obj.select(); var path = document.selection.createRange().text; //ie下返回上传时选定的文件路径 var img = new Image(); img.src = path; var fileType = path.substring(path.length-4,path.length); if(img.readyState == "complete") { //图片加载完毕,获取图片的大小 fileSize = img.fileSize; } else { img.onreadystatechange=function(){ if(img.readyState=='complete'){ //当图片load完毕 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"){ 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"); } } </script> </head> <body> <input type="file" value="文件上传" onchange="photoCheck(this)"/> <div> //显示图片的div <img src=""></img> </div> </body> </html>
如果是在chrome下上传的头像的话，我们查看的起src路径会发现
发现该方法将文件读取为一段以 data: 开头的字符串，像上面描述的一样，正是FileReader中readAsDataURL的作用，下面介绍下FileReader
方法名参数描述
abort
none
中断读取
readAsBinaryString
file
将文件读取为二进制码
readAsDataURL
file
将文件读取为 DataURL
readAsText
file, [encoding]
将文件读取为文本