时间:2021-05-26
实例如下:
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"); } }用于上传图片的验证
下面讲解上面的代码:
下面是一个用户上传头像的格式和大小的验证的方法,在用户注册的时候要求用户上传头像的时候进行的验证。在方法中我给予了最详细的注释
如果是在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 ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。
以上就是小编为大家带来的JS验证图片格式和大小并预览的简单实例全部内容了,希望大家多多支持~
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS实现获取图片大小和预览的方法。分享给大家供大家参考,具体如下:JS获取图片大小和预览【兼容IE和其它浏览器】functionpreviewIm
场景选择一张照片并选择保存位置和要转换的图片格式实现图片格式转换。项目运行效果实现新建一个窗体页面,然后设计页面布局如下选择图片按钮点击事件中privatevo
设置图片格式Android目前常用的图片格式有png,jpeg和webp,png:无损压缩图片格式,支持Alpha通道,Android切图素材多采用此格式jpe
本文实例讲述了Python实现批量修改图片格式和大小的方法。分享给大家供大家参考,具体如下:第一种方法用到opencv库importosimporttimeim
2.虚假交易申诉的图片格式有什么要求?虚假交易申诉的图片格式支持jpg、png、jpeg、gif,图片大小不超过5M。1.商品举报通过对商品不同违规类型进行举报