对于web开发人员来说文件上传文件是经常遇到的,判断文件大小也是不可缺少,在这里主要介绍一下javascript判断文件大小的几种常见的方法。
第一种是应用ActiveX控件的实现,例如:
<script type="text/javascript">
function getFileSize(filePath)
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
alert("文件大小为:"+fso.GetFile(filePath).size);
}
</script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value);">
</body>
<script type="text/javascript">
function getFileSize(filePath)
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
alert("文件大小为:"+fso.GetFile(filePath).size);
}
</script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value);">
</body>
这种方法可以实现,也容易被开发人员想到,但是唯一不足之处是有安全提示,当然把文件名改为.hta则会屏蔽掉安全提示,但很难被需求所取。不推荐,也不多说
下面主要谈谈另一种方式,在html标签中有一个不为一般开发人员“深”知的img标签,先来说下他有的属性:src,dynsrc,start,alt,controls,loop,loopdelay,hspace,vspace....还有一些常用的属性就不列出来了,在这里我们说一下"dynsrc"这个属性:dynsrc可以用来插入各种多媒体,格式可以是Wav、Avi、AIFF、AU、MP3、Ra、Ram等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
示例:<img dynsrc="xxxx.mp3">
这样我们就可以根据dynsrc动态赋值任何类型文件的路径,在javascript中根据Image对象本身的fileSize属性来得到文件的大小。当然Image对象还有其他的几个属性,例如:fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters... , 代码如下:
<script type="text/javascript">
function getFileSize(filePath)
{
var image=new Image();
image.dynsrc=filePath;
alert(image.fileSize);
}
</script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)">
</body>
<script type="text/javascript">
function getFileSize(filePath)
{
var image=new Image();
image.dynsrc=filePath;
alert(image.fileSize);
}
</script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)">
</body>
经测试,得到文件大小,并未出现安全提示,推荐,没的说
分享到:
相关推荐
在前端,JavaScript可以用来做初步的文件大小验证,避免用户上传过大的文件导致服务器端处理压力过大或者服务器资源浪费。 在JavaScript中,我们可以使用`HTML5`的File API来获取文件的信息,例如文件名、类型和...
三、文件大小限制的JavaScript实现 1. 获取文件大小 当用户选择文件后,`<input type="file">`标签的`change`事件会被触发。我们可以在这个事件中获取到选中的文件,并通过`FileList`对象的`item`方法获取到`File`...
判断文件大小是否超出限制 `getFileSize`函数中,首先检查文件名是否为空,如果为空则提示用户选择文件。然后,尝试获取文件对象并计算其大小(以KB为单位)。接下来,与预先设定的文件大小限制(`flength`)进行...
总结起来,通过Ajax判断文件大小是利用JavaScript的FileReader API和Ajax技术实现的,可以提供无缝的用户体验,同时避免了不必要的服务器压力。如果在特定服务器环境下遇到问题,如IIS,需要进一步分析和调整服务器...
以下代码展示了如何使用JavaScript来检查文件大小: ```javascript function getFileSize(filename) { // 检查文件名是否为空 if (filename === '') { alert("请选择文件!"); return false; } try { var ...
Plupload内置了客户端文件大小检查的功能,可以轻松实现上述的客户端文件大小判断。使用Plupload,开发者可以自定义设置上传参数,如文件大小限制,并且能够优雅地处理各种浏览器的兼容性问题。 总的来说,客户端...
// 判断文件大小是否超过5MB if ((fileSize / (1024 * 1024)) > 5) { alert("文件大小不能超过5MB"); // 清空输入框 $("#" + target.id).val(""); return false; } } ``` #### 四、关键点解析 1. **检测...
本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> [removed] var isIE = /msie/i.test...
本篇介绍的方法主要基于早期的JavaScript技术实现文件大小和类型的限制。随着现代Web技术的发展,尤其是HTML5的出现,现在更推荐使用`FileReader` API和其他API来实现这些功能,它们提供了更好的跨浏览器支持和更...
然而,需要注意的是,这种方式并不能确保100%的准确性,因为某些文件格式可能会保存元数据或空格,即使内容为空,文件大小也可能不是0。例如,一个空的.txt文件可能会有1或2字节的元数据。在这种情况下,你可能需要...
在这个示例中,`MAX_IMAGE_SIZE`、`MAX_WIDTH`和`MAX_HEIGHT`分别代表允许的最大文件大小和尺寸。 7. **性能优化**: 为了避免不必要的资源消耗,可以先验证图片类型和大小,只有在满足条件后才创建`Image`对象...
3. **文件大小判断**:最后,根据预先设定的最大允许文件大小,判断用户上传的文件是否超出限制。 #### 三、代码解析 下面是对上述代码的逐行解析: ```html <script language="javascript" type="text/...
通过这个实例,我们可以了解到如何利用Node.js对文件系统进行高效地遍历和处理,并且理解到了文件大小数据对于前端优化的重要性。 对于前端开发而言,图片等静态资源通常是影响页面加载速度的主要因素之一。因此,...
不用IE控件(ActiveXObject)不用 Img属性 上传图片客户端判断大小,javascript获得上传图片的大小 兼容所有浏览器,亲测可用 判断文件大小,判断上传图片的大小,图片格式
在IT行业中,本地上传图片预览以及客户端判断文件大小和文件格式是常见的功能需求,尤其在Web应用中。这一功能可以提升用户体验,让用户在上传图片前就能预览效果,同时防止上传过大或不合适的文件。以下是对这个...
在上述代码中,`MAX_FILE_SIZE`代表允许的最大文件大小,单位为字节。根据实际需求,你可以调整这个值。`allowedTypes`数组则包含了允许上传的MIME类型。这里我们只允许上传JPEG、PNG图片和PDF文件,你可以根据项目...
在`handleImageChange`函数中,我们可以通过`File.size`属性获取文件大小(单位为字节)。如果图片过大,可以阻止预览并提示用户。 ```javascript function handleImageChange(event) { const file = event.target...
在JavaScript中,对上传文件大小进行判断是网页交互中常见的一种功能,特别是在处理用户上传文件时,为了防止服务器被大文件占用过多资源或确保文件上传符合网站规定,我们需要在前端进行预判。以下是对这个主题的...