前端上传图片时,我们大多选择使用写好的组件来上传图片;但在应用过程中,有些框架就没有提供判断图片大小的方法,那么久需要我们自己用js实现。
针对浏览器内核的不同,我们判断图片大小的方法也不一样;所以,下面的代码可以应用在大多数市场份额的浏览器上。
大多数的验证并不是读取图片后判断其大小,而是用一种简便巧妙的方法读取文件所在本地系统中的大小属性。
下面看代码示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="DEscription" contect="my code demo" />
<meta name="Author" contect="Michael@www.micmiu.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js check file size @ www.micmiu.com</title>
</head>
<body>
<img id="tempimg" dynsrc="" src="" style="display:none" />
<input type="file" name="file" id="fileuploade" size="40" />
<input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/>
记住上面表单的两个id,tempimg 和 fileuploade 后面我们将要使用这两个id
</body>
<script type="text/javascript">
var maxsize = 2*1024*1024;//2M
var errMsg = "上传的附件文件不能超过2M!!!";
var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过2M,建议使用IE、FireFox、Chrome浏览器。";
var browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE")>=1){
browserCfg.ie = true;
}else if(ua.indexOf("Firefox")>=1){
browserCfg.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
browserCfg.chrome = true;
}else {//其他浏览器大多是跟火狐一样的内核
browserCfg.firefox = true;
}
function checkfile(){
try{
var obj_file = document.getElementById("fileuploade");
if(obj_file.value==""){
alert("请先选择上传文件");
return;
}
var filesize = 0;
if(browserCfg.firefox || browserCfg.chrome ){
filesize = obj_file.files[0].size;
}else if(browserCfg.ie){
var obj_img = document.getElementById('tempimg');
obj_img.dynsrc=obj_file.value;
filesize = obj_img.fileSize;
}else{
alert(tipMsg);
return;
}
if(filesize==-1){
alert(tipMsg);
return;
}else if(filesize>maxsize){
alert(errMsg);
return;
}else{
alert("文件大小符合要求");
return;
}
}catch(e){
alert(e);
}
}
</script>
</html>
原文参照:http://zhuchengzzcc.iteye.com/blog/1573360
分享到:
相关推荐
在IT领域,特别是前端开发中,JavaScript(JS)被广泛应用于网页交互与数据验证,其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证,包括检查图片格式、...
在进行图片上传功能时,确保图片大小的验证是非常重要的安全措施。这有助于防止用户上传过大的文件,从而避免服务器资源的过度消耗,提高网站性能,以及优化用户体验。本文主要讨论了两种图片大小验证方法:后台处理...
总结来说,JavaScript验证上传文件大小主要通过监听文件输入字段的`change`事件,获取文件对象,然后检查`size`属性。结合HTML和CSS,我们可以创建一个交互式的文件上传界面,提供友好的用户反馈。这个功能对于任何...
在JavaScript中,对用户上传的图片进行大小验证是常见的需求,尤其在网页应用中,确保图片大小在合理范围内可以优化加载速度,节省服务器资源。这个"JS上传图片大小验证.rar"压缩包可能包含了一个实现此类功能的示例...
除了验证文件大小,还可以结合File API实现其他功能,如预览图片、显示文件类型图标、多文件上传等。 综上所述,JS上传文件大小验证是通过HTML5 File API实现的一种前端交互技术,它能够提高用户体验,减少无效的...
将上述的类型和大小检测结合起来,形成完整的图片上传前的验证功能: ```javascript function validateImage(file, maxSizeInBytes) { if (!checkFileType(file)) { handleUploadError(file, 'type'); return...
在IT行业中,前端开发经常会遇到用户上传文件的需求,而对上传文件的格式和大小进行验证是确保系统稳定性和用户体验的重要环节。本知识点主要探讨如何使用JavaScript(js)来验证SWF(Shockwave Flash)文件的格式,...
在JavaScript中,对上传图片进行大小、宽度和高度的判断是一项常见的前端操作,尤其是在实现用户在网站上上传图片时需要预览和验证图片格式及尺寸的场景。以下是一些关于如何使用JavaScript进行这些判断的关键知识点...
本文将深入探讨如何使用JavaScript(JS)来控制图片上传的大小,确保用户上传的图片符合预设的标准。 一、图片上传前的前端验证 在用户提交图片之前,前端验证是最直接的控制方式。可以使用HTML5的`FileReader API...
后台处理指的是服务器端在图片上传后进行大小的检查,而前台处理则是在图片上传到服务器之前,通过客户端的JavaScript代码对图片大小进行验证。 首先,前台处理有其显著的优势,主要表现在用户体验上。如果上传的...
这个项目是用PHP、Ajax和JavaScript这三种技术实现的,允许用户上传图片并即时预览,同时还可以调整显示的图片大小。接下来,我们将深入探讨这些技术以及它们在实现此功能中的角色。 **PHP** 是一种广泛使用的...
在本文中,我们将深入探讨如何使用JS实现图片上传到阿里云对象存储服务(OSS)。阿里云OSS是一个高可用、高可靠的云存储服务,能够为开发者提供安全、稳定的数据存储解决方案。 首先,`plupload` 是一个开源的多...
项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 <html> <...
使用 JavaScript,可以实现在客户端验证图片的上传格式、大小等信息,从而减少服务器的负载。此外,JavaScript 也可以用于实现上传图片的进度条、上传按钮等交互式功能。 HTML、CSS 和 JavaScript 的结合使用是实现...
然而,如果不进行图片大小的验证,可能会导致用户上传过大的图片,这不仅会消耗服务器资源,还可能影响网站性能和用户体验。因此,对上传的图片进行客户端验证是非常必要的。本文将详细介绍如何使用JavaScript在...
在JavaScript中获取上传文件的大小是一项常见的需求,尤其是在ASP.NET框架下构建Web应用程序时。这个功能可以帮助用户在上传文件之前预知文件的大小,避免过大文件导致服务器压力或网络延迟。下面将详细介绍如何使用...
为了提供良好的用户体验并确保系统稳定运行,开发者通常需要对用户上传的图片进行一些限制,包括图片的大小和类型。以下是对这一主题的详细说明: 1. **图片大小限制**: - **原因**:图片过大可能导致上传时间过...
本篇将详细介绍如何在`.NET MVC`框架下,结合`HTML`、`JavaScript`(简称Js)和`jQuery`(简称JQ)实现"上传图片预览"功能,并限制上传的图片格式和大小。 首先,我们需要在前端页面创建一个`HTML`表单,包含一个`...