`
Relucent
  • 浏览: 209287 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS前端获取上传文件的大小的方法

    博客分类：
  • JS
IEJavaScriptWebHTML 
阅读更多

WEB应用中，经常会遇到上传附件的问题，比如有时候会有限制附件大小的需求。那么如何去判断附件的大小呢？

 

方法如下：（遗憾的IE中只能判断出图片文件的大小） 

  

<html>
	<head>
		<title>JS获取文件大小 </title>
		<script type='text/javascript'>
			
			///获得文件的大小(单位字节)
			function GetFileSize(fileId) {
			    var dom = document.getElementById(fileId);
			    try {
			        return dom.files.item(0).fileSize;
			    } catch (e) {
			        try {
			            var img = new Image();
			            img.src = dom.value;
			            img.style.display='none';
			           	document.body.appendChild(img);
									setTimeout(function(){
										document.body.removeChild(img);
									},1000);
			           	return img.fileSize;
			        } catch (e) {
			            return -1;
			        }
			    }
			}
			
			function testFileSize(){
				alert('文件大小=' + GetFileSize('oFile'));	
			}

		</script>
	</head>
	<body>
		<input id='oFile' type='file' value=''>
		<input type='button' value='测试大小' onclick='testFileSize()'>
	</body>	
</html>

 

分享到：
| Linux关闭防火墙命令(备忘)
评论
2 楼 Relucent 2010-12-07  
ie的话 只支持图片
1 楼 lei3389 2010-11-03  
你这是用了js2.0里面的文件接口，ie不支持。
还有就是转成img那段我怎么测试着不管用啊，ie8下
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    原生JS上传文件，获取文件二进制数据及文件大小和文件名称

    在前端开发中，上传文件是一项常见的功能，尤其是在用户交互丰富的Web应用中。原生JavaScript提供了强大的能力来处理这种任务，无需依赖外部库如jQuery或React等。本知识点将深入探讨如何使用原生JavaScript实现文件...

    上传文件jsweb前端（包含文件格式限制）

    "上传文件jsweb前端（包含文件格式限制）"这个项目旨在提供一个完整的前端文件上传解决方案，它不仅支持基本的文件上传操作，还包含了对文件格式和大小的严格限制，以确保用户上传的数据符合预设的标准，类似于163...

    上传文件demo

    "上传文件demo"这个项目就是针对这一需求的一个实例，它展示了如何在前端实现多文件图片上传的功能。下面将详细讨论相关知识点。 1. **前端文件API**：在HTML5中，引入了File API，允许前端直接操作用户选择的文件...

    java 上传文件，实时获取上传进度.

    - 文件大小限制：为了避免过大文件导致服务器资源耗尽，应设置上传文件大小的最大限制。 - 文件类型检查：确保上传的文件类型符合预期，防止恶意文件上传。 - 文件重命名：上传后的文件应进行重命名，防止路径...

    前端实现大文件的上传操作

    通过监听`XMLHttpRequest`的`progress`事件或`fetch`的`progress`响应，可以获取上传进度并更新用户界面。这可以帮助用户了解上传状态，提升用户体验。 6. 断点续传： 针对网络不稳定的情况，前端需要保存已上传...

    JS判断上传文件的大小类型等限制

    ### JS判断上传文件的大小类型等限制 在Web开发中，文件上传是一个常见的功能需求。为了确保用户体验并防止服务器资源被滥用，前端通常需要对上传的文件进行一系列的验证，如文件大小、文件类型等。本文将详细介绍...

    JS上传文件大小验证.rar

    "JS上传文件大小验证"这个主题涉及到用户在网页上选择文件后，前端先进行文件大小的检查，以防止过大文件导致服务器压力或者用户体验问题。下面将详细阐述这一知识点。 一、文件API的使用 在HTML5中，File API提供...

    Web（前端） input标签 上传图片支持预览，计算图片大小 源码

    同时，计算图片的大小对于限制上传文件大小或者优化存储空间来说至关重要。以下将详细介绍如何实现这两个功能。 首先，我们需要创建一个`&lt;input type="file"&gt;`元素，添加`accept`属性来指定只接受图片类型，例如`....

    JavaScript判断上传文件大小的限制脚本

    在网页应用中，用户上传文件是一项常见的功能，但为了服务器性能和用户体验，通常需要对上传文件的大小进行限制。本文将深入探讨如何使用JavaScript来实现这一功能，通过前端验证，防止大文件上传导致的网络延迟或者...

    js验证上传文件大小

    本文将详细讲解如何使用JavaScript（简称JS）来验证上传文件的大小。 JavaScript是一种运行在客户端的脚本语言，它可以用于处理用户输入、验证表单数据以及与服务器交互等多种任务。验证上传文件大小是其中一项重要...

    js上传文件js 上传单个文件(任意大小)

    在JavaScript中，可以利用`File`对象的`size`属性来检查文件的大小，从而实现对上传文件大小的限制。例如，可以通过比较文件的实际大小与设定的最大值，决定是否允许上传： ```javascript const file = event.target...

    js验证上传图片 大小 格式

    在IT领域，特别是前端开发中，JavaScript（JS）被广泛应用于网页交互与数据验证，其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证，包括检查图片格式、...

    上传文件大小的限制和判断javascript

    本文将深入探讨如何利用JavaScript来实现对上传文件大小的限制与判断。 ### 一、理解上传文件大小的限制 上传文件大小的限制通常由以下几个方面决定： 1. **服务器或应用程序的配置**：服务器或后端框架可能已经...

    js代码实现图片上传阿里云OSS

    在这个事件处理器中，可以获取到上传文件的相关信息，如文件名、文件URL等。 5. **显示上传进度**：利用`plupload`的`Progress`事件，可以实时更新上传进度条，展示当前文件的上传进度。 6. **处理异常**：确保...

    前端图片上传压缩

    标题中的“前端图片上传压缩”指的就是在客户端（用户浏览器）对图片进行压缩处理，减少图片的大小，然后将其上传到服务器。这种技术通常用于优化用户体验，提高上传效率，并减轻服务器的压力。 描述中虽然没有提供...

    图片和文件上传的前端实现

    在前端开发中，图片和文件上传是常见的功能需求，它涉及到HTML、JavaScript（JS）以及CSS等技术。这里我们将深入探讨这些技术如何协同工作来实现这一功能。 首先，`index.html`是网页的主文件，它定义了页面的结构...

    七牛分片上传前端js

    这种技术在前端JavaScript中可以实现，使得用户在浏览器端就能方便地进行大文件的上传操作。 分片上传的核心原理是将一个大文件分割成若干个小块（通常称为“切片”或“分片”），然后逐个上传这些小块。这样做有...

    js上传附件

    在JavaScript（简称JS）中实现上传附件功能是一项常见的任务，特别是在网页应用中。这个功能允许用户选择并上传本地文件到服务器，通常与表单提交或数据存储相关联。本项目中，"js上传附件"的功能可能包括以下几个...

    js+php分片上传大文件学习demo（上传进度条、解决php单文件上传大小限制）

    2. js捕获文件信息，获取文件大小，根据提前设置好的分片大小，将文件进行分片； 3. 利用后台代码（PHP）驱动上传文件分片，且需要上传分片的索引值和总分片数； 4. 后台上传代码识别到最后一个分片后，需要将已上传...

    大文件上传, ajax 实现, 支持10G以上的上传

    4. **进度反馈**：前端可以通过监听XMLHttpRequest的upload事件，如progress事件，实时获取上传进度，更新UI展示。 5. **错误处理**：当上传过程中出现错误时，前端可以捕获并处理这些错误，例如网络中断或服务器...

Magicbox
Global site tag (gtag.js) - Google Analytics