<html>
<head>
<title>客户端控制上传图像的类型和大小</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
以下是一个客户端控制file上传图片类型和大小的示例(注意:由于是客户端限制,所以用户可以绕过这个限制):
<script language="javascript">
<!--
var FileMaxSize = 50;//限制上传的文件大小,单位K
function chkform(){
if (document.HwForm.Photo.value==""){alert("请选择图片!");document.HwForm.Photo.focus();return false;}
if(document.HwForm.PhotoFileSize.value<=0){alert("请重新选择图片!");document.HwForm.Photo.focus();return false;}
if(document.HwForm.PhotoFileSize.value>FileMaxSize*1024){alert("图片不能超过"+FileMaxSize+"K,请重新选择!");document.HwForm.Photo.focus();return false;}
alert("图片类型和大小正确,可以提交!");return false;
}
//-->
</script>
<form method="post" name="HwForm" onsubmit="return(chkform());" enctype="multipart/form-data">
请选择一个50K以内的图片:<input type="file" name="Photo" onpropertychange="if(document.HwForm.Photo.value!=''){document.getElementById('PhotoImg').src=document.HwForm.Photo.value;}"><img style="position:absolute;top:-100000px;left:-100000px;" onerror="document.all.PhotoFileSize.value='-1';alert('图片类型错误,请重新选择!');" onload="if(document.getElementById('PhotoImg').fileSize<=1024*FileMaxSize){document.all.PhotoFileSize.value=document.getElementById('PhotoImg').fileSize;}else{alert('图片不能超过'+FileMaxSize+'K,请重新选择!');document.all.PhotoFileSize.value='-1';}" id="PhotoImg"><input size="3" type="hidden" name="PhotoFileSize" value="-1">
<input type="submit" value="提交"> <input type="reset" value="重置">
</form>
</body>
</html>
转:http://www.codefans.net/jscss/code/2018.shtml
分享到:
相关推荐
描述中提到的方法,是通过JavaScript或者其他前端技术在用户选择文件后立即检查文件大小,而不是等到文件实际上传到服务器时再进行检查。这种方式可以在文件上传之前就提供反馈,提高用户体验,同时避免了不必要的...
在开发Web应用时,文件...总的来说,通过`jQuery`实现客户端文件上传的类型和大小判断,可以有效地提升用户体验,并且在一定程度上保护了服务器资源。不过,为了确保安全性,开发者应始终在服务器端进行严格的验证。
在IT行业中,本地上传图片预览以及客户端判断文件大小和文件格式是常见的功能需求,尤其在Web应用中。这一功能可以提升用户体验,让用户在上传图片前就能预览效果,同时防止上传过大或不合适的文件。以下是对这个...
这篇分享的代码提供了一种JavaScript实现方式,用于在客户端判断用户选择的文件是否符合预设的类型和大小限制。 1. **文件类型检查**: 文件类型的判断主要是通过获取用户选择文件的扩展名来实现的。在`fileChange...
不用IE控件(ActiveXObject)不用 Img属性 上传图片客户端判断大小,javascript获得上传图片的大小 兼容所有浏览器,亲测可用 判断文件大小,判断上传图片的大小,图片格式
File对象提供了关于文件的信息,如文件名、类型和大小等,这为我们实现文件大小限制提供了可能。 三、文件大小限制的JavaScript实现 1. 获取文件大小 当用户选择文件后,`<input type="file">`标签的`change`事件会...
判断文件大小是否超出限制 `getFileSize`函数中,首先检查文件名是否为空,如果为空则提示用户选择文件。然后,尝试获取文件对象并计算其大小(以KB为单位)。接下来,与预先设定的文件大小限制(`flength`)进行...
### JavaScript客户端验证与页面特效制作知识点详解 #### 第一章:JavaScript的基本特征 ##### 一、关于JavaScript JavaScript 是一种轻量级的编程语言,它最初由 Netscape 和 Sun Microsystems 共同开发。该语言...
总结起来,通过Ajax判断文件大小是利用JavaScript的FileReader API和Ajax技术实现的,可以提供无缝的用户体验,同时避免了不必要的服务器压力。如果在特定服务器环境下遇到问题,如IIS,需要进一步分析和调整服务器...
4. **判断文件大小**: ```javascript if (fileInfo.size > maxSize) { isUpload = false; errNum = 1; } ``` 检查文件大小是否超过了`maxSize`,如果超过,则设置`isUpload`为`false`并记录错误编号。 5. *...
本文将介绍如何用JavaScript判断文件上传类型的方法,以及如何处理用户上传相同文件时触发onchange事件的问题。 首先,文件上传功能的实现依赖于HTML的`<input>`标签,通过设置其`type`属性为`file`,可以创建一个...
本文主要介绍了如何使用JavaScript检测用户上传文件的大小,这在网页设计中是一个常见的需求,尤其当需要限制上传文件大小以符合服务器端处理能力或者节省带宽资源时。 首先,网页中的文件上传通常是通过HTML的文件...
在JavaScript(JS)中,处理客户端的图片上传是一项常见的任务,尤其在网页应用中,我们需要确保用户上传的图片符合特定的格式和大小限制,同时提供实时预览功能以提升用户体验。下面将详细介绍如何实现这些功能。 ...
例如,可以使用`<asp:RegularExpressionValidator>`控件配合正则表达式限制上传的文件类型,或者使用JavaScript的`FileReader` API获取文件大小。 2. **jQuery或Ajax验证**:结合jQuery库,可以创建更复杂的交互,...
8、原生JavaScript判断是否为数字类型 9、原生JavaScript设置cookie值 10、原生JavaScript获取cookie值 11、原生JavaScript加入收藏夹 12、原生JavaScript设为首页 13、原生JavaScript判断IE6 14、原生JavaScript...
使用它不需要编写多少代码,只需对验证元素简单配置一下即可,使用方便,也不会影响页面的布局,并可以精确判断客户端输入框的长度、必填、数据类型(整数型、浮点型、字母型、数字字母混合型)和下拉框等,及对需要...
### 通过客户端验证上传图片文件大小的ASP:知识点解析 #### 一、ASP与客户端验证的概念 1. **ASP(Active Server Pages)**:是一种服务器端脚本环境,用于创建和运行动态、交互式 Web 应用程序。在 ASP 中,可以...
在Web开发中,文件上传是一个常见的功能,而JavaScript在客户端可以用于实现初步的文件大小和格式验证,以提高用户体验和减少服务器压力。这里我们将详细讨论如何使用JavaScript来判断上传文件的大小和格式。 首先...