文件管理 · 2022年9月28日

js读取图片文件大小|js如何获取图片显示时的大小尺寸

❶ jsp页面上怎么用javascript获取base64编码的图片的大小如图,用js怎么获取这种格式图片的大小

base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求Data URI scheme。 Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片。 在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据。 目前,Data URI scheme支持的类型有: data:,文本数据 data:text/plain,文本数据 data:text/html,HTML代码 data:text/html;base64,base64编码的HTML代码 data:text/css,CSS代码 data:text/css;base64,base64编码的CSS代码 data:text/javascript,Javascript代码 data:text/javascript;base64,base64编码的Javascript代码 data:image/gif;base64,base64编码的gif图片数据 data:image/png;base64,base64编码的png图片数据 data:image/jpeg;base64,base64编码的jpeg图片数据 data:image/x-icon;base64,base64编码的icon图片数据 base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘images/log.gif”')); 目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。 举个图片的例子: 网页中一张图片可以这样显示: 代码如下:<img src=“jwzzsw.com/images/log.gif”/> 也可以这样显示: 代码如下:<img src=“data:image/gif;base64,R0lGODlhAgACAIAAAP///wAAACwAAAAAAgACAAACAoRRADs=”/> 我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。

❷ 如何在上传图片时在客户端用js判断图片大小并弹出提示

<input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> K<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/><img src="about:blank" id="fileChecker" alt="test" height="18"/> //前面为网页<script type="text/javascript">var oFileChecker = document.getElementById("fileChecker"); function changeSrc(filePicker){ oFileChecker.src = filePicker.value;//读图片} //这个很重要,判断是否完全读完,否则判断图片大小不准确oFileChecker.onreadystatechange = function (){ if (oFileChecker.readyState == "complete") { checkSize(); }} function checkSize(){ var limit = document.getElementById("fileSizeLimit").value * 1024; if (oFileChecker.fileSize > limit) { alert("too large"); } else { alert("ok"); }}</script>

❸ js如何获取图片显示时的大小尺寸

给img添加加载事件,图像加载完成才能获取图片的尺寸。html中添加回onloadfunction showSize(img){alert(img.width);alert(img.height);}<div style="width:100px;height:600px"><img src="1.jpg" onload="showSize(this)"></div>或者答js代码中添加onloadlet img=document.querySelector("div img");img.onload = function() {alert(img.height);alert(img.width);}

❹ 求JS获取图片大小和尺寸的代码

获得文件大小大概有两种解决方法: (一)使用document.getElementById或者document.createElement的或者var img=new Image(); 然后在onreadystatechange事件里检查大小 但这种代码通用性不强浏览器兼容存在问题一直无法解决 (二)使用FSO控件,但这样存在安全问题 <div id="photoyn"><input id="file1" type="file" onchange="ShowSize(this.value)" /> <script type="text/javascript"> function ShowSize(files){ var fso,f; fso=new ActiveXObject("Scripting.FileSystemObject"); f=fso.GetFile(files); var mySize = f.size/1024; alert(mySize+" K "); var myName = f.Name; var myPath = f.Path; var myDrive = f.Drive; var myType = f.type; var myAttributes = f.Attributes; var myDateCreated = f.DateCreated; } </script> 所以说要在客户端检测文件大小没有实现方法。 最终解决方案还是在服务器端检测,在上传的过程中,在服务器的内存中进行判断并返回信息给客户端。

❺ JS获取图片大小(长宽)问题

可以配合JS来实现获到本地磁盘图片文件的相关属性,请参照天南(QQ:46926125)提供的DEMO: ##Code##<script language="javascript"> function insertTitle(tValue){ var t1 = tValue.lastIndexOf("\\"); var t2 = tValue.lastIndexOf("."); if(t1 >= 0 && t1 < t2 && t1 < tValue.length){ document.getElementById("pTitle").value = tValue; document.getElementById("pTitlel").value = tValue.substring(t1 +1); document.getElementById('guo').innerHTML="<img id='demo_img' src='"+tValue+"' />" document.getElementById('imgc_width').value=document.getElementById('demo_img').width; document.getElementById('imgc_height').value=document.getElementById('demo_img').height; } }</script><form action="" method="get" onSubmit="return false;"> <input type="text" name="pTitle"> <input type="text" name="pTitlel"> <input type="file" name="pFile" onChange="if(this.value){insertTitle(this.value)};"> <input type="submit" value="submit"></form>图片宽:<input type="text" id="imgc_width" />px图片高:<input type="text" id="imgc_height" />px<hr /><div id="guo"></div>

❻ JS获取图片大小时错误

代码修改如下:<script language="JavaScript" type="text/javascript"><!–function checkImgSize(){var file = document.getElementById("img");if(file.value != ""){//检测类型var val = file.value;if(/^.*?\.(gif|jpg|jpeg|bmp|GIF|JPG|JPEG|BMP)$/.test(val)){}else{alert("只能上传gif, jpg, bmp格式的图片");return false;}var imgSize = 1024 * 200; //最大200Kvar img = new Image();img.onreadystatechange = function(){if(img.readyState == "complete"){var fso=new ActiveXObject("Scripting.FileSystemObject");var fileSize=fso.GetFile(val).Size;if(fileSize > imgSize){alert("当前文件大小" + fileSize + "KB,图片太大!");}else{alert("当前文件大小" + fileSize + "KB");return true;}}}img.src = val;}else{alert("请选择上传的文件!");return false;}}// –></script> <table border="0" width="95%" cellspacing="0" cellpadding="0" align="center"> <form name="addform" enctype="multipart/form-data" method="post" action="save.asp" onSubmit="return checkImgSize()"> <tr> <td height="25" width="94">图片地址</td> <td><input type="file" name="sf_upfile" id="img" size="19"> <input type="submit" value="上 传" name="submit"></td> </tr> </form> </table>

❼ jQuery有没有获取图片实际尺寸的方法

可以很明确的说,js无法得知没有标示的img标签的原图的图片大小。即使是onload完后得到的也只是图片的显示大小而已,所以你在保存图片的时候就需要把原图的大小写到img标签上,比如知乎的原图规则:<img src="http://pic3.mg.com/_xld.jpg" data-rawwidth="572" data-rawheight="225" class="origin_image inline-img zh-lightbox-thumb" data-original="http://pic3.mg.com/_r.jpg">其中data-rawwidth和data-rawheigth就是原图的原始宽高,但是这个数据是在用户提交表单时由后台程序分析图片的数据流得出的。

❽ JavaScript中怎么获取指定文件的大小

获取上传文件的大小:内<input type="file" name="fileId" id="fileId" class="height30 width-245">function findSize(field_id){ var byteSize = 0; if (!容+[1,] && !$("#"+field_id).files) { var filePath = $("#"+field_id).val(); var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); byteSize = fileSystem.GetFile(filePath).size; } else{ var fileInput = $("#"+field_id)[0]; byteSize = fileInput.files[0].size; } return ( Math.ceil(byteSize / 1024) ); }

❾ js 中,已知图片路径,怎么获取图片的大小,不是宽高,是大小(多少k那种)

<html> <head><script type="text/javascript" src="jquery.js"></script></head><body><input type="file" id="fs" onchange="getFileSize()"/></body><script type="text/javascript">function getFileSize(){ var file = document.getElementById("fs"); var size = file.files[0].size; alert(size); } </script></html>

❿ js获取上传图片的尺寸

你是怎么取得Image对象的宽度和高度的?用的image.style.width和image.style.height??这两个只能获得显示在元素style属性中设置版的css样式。用image对象是没错权的,var image = new Image();image.src = 你的图片路径;document.body.appendChild(image);image.onload = function(){ console.log(image.offsetWidth); image.style.display = 'none';}这样可以获得图片的高度。记住一定得把图片加到页面上去,你可以取得高度之后马上隐藏他。