<script language="JavaScript">
extArray = new Array(".gif", ".jpg", ".png");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) { allowSubmit = true; break; }
}
if (allowSubmit) form.submit();
else
alert("Please only upload files that end in types: "
+ (extArray.join(" ")) + "\nPlease select a new "
+ "file to upload and submit again.");
}
</script>
<body>
Click "Browse" to choose the photo from your computer.<BR>
Please upload only images that end in:
<script> document.write(extArray.join(" "));
</script><BR>
Then click "Upload Your Photo" to upload it
<form method="POST" action="newphoto.asp" enctype="multipart/form-data" id=form1 name=form1>
<input type="file" name="UploadForm" size="30"><BR><BR>
<input type="button" name="submit" value="Upload Your Photo!" onclick="LimitAttach(this.form, this.form.UploadForm.value)">
-------------------------------------------------------------------
JS前端检测上传文件类型以及属性大小，并生成预览
<script language=javascript>
var ImgObj=new Image(); //建立一个图像对象
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性
//以下为限制变量
var AllowExt=".jpg|.gif|.doc|.txt|" //允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示
//var AllowExt=0
var AllowImgFileSize=70; //允许上传图片文件的大小 0为无限制 单位：KB
var AllowImgWidth=500; //允许上传的图片的宽度 ?为无限制 单位：px(像素)
var AllowImgHeight=500; //允许上传的图片的高度 ?为无限制 单位：px(像素)
HasChecked=false;
function CheckProperty(obj) //检测图像属性
{
FileObj=obj;
if(ErrMsg!="") //检测是否为正确的图像文件 返回出错信息并重置
{
ShowMsg(ErrMsg,false);
return false; //返回
}
if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测
{
setTimeout("CheckProperty(FileObj)",500);
return false;
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
ImgWidth=ImgObj.width //取得图片的宽度
ImgHeight=ImgObj.height; //取得图片的高度
FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px";
FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb";
FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt;
if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth) ErrMsg=ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+AllowImgWidth+"px的文件，当前图片宽度为"+ImgWidth+"px";
if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) ErrMsg=ErrMsg+"\n图片高度超过限制。请上传高度小于"+AllowImgHeight+"px的文件，当前图片高度为"+ImgHeight+"px";
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) ErrMsg=ErrMsg+"\n图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件，当前文件大小为"+ImgFileSize+"KB";
if(ErrMsg!="") ShowMsg(ErrMsg,false);
else ShowMsg(FileMsg,true);
}
ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'}
function ShowMsg(msg,tf) //显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容
{
msg=msg.replace("\n","<li>");
msg=msg.replace(/\n/gi,"<li>");
if(!tf)
{
document.all.UploadButton.disabled=true;
FileObj.outerHTML=FileObj.outerHTML;
MsgList.innerHTML=msg;
HasChecked=false;
}
else
{
document.all.UploadButton.disabled=false;
if(IsImg)
PreviewImg.innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>"
else
PreviewImg.innerHTML="非图片文件";
MsgList.innerHTML=msg;
HasChecked=true;
}
}
function CheckExt(obj)
{
ErrMsg="";
FileMsg="";
FileObj=obj;
IsImg=false;
HasChecked=false;
PreviewImg.innerHTML="预览区";
if(obj.value=="")return false;
MsgList.innerHTML="文件信息处理中...";
document.all.UploadButton.disabled=true;
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //判断文件类型是否允许上传
{
ErrMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件，当前文件类型为"+FileExt;
ShowMsg(ErrMsg,false);
return false;
}
if(AllImgExt.indexOf(FileExt+"|")!=-1) //如果图片文件，则进行图片信息处理
{
IsImg=true;
ImgObj.src=obj.value;
CheckProperty(obj);
return false;
}
else
{
FileMsg="\n文件扩展名:"+FileExt;
ShowMsg(FileMsg,true);
}
}
function SwitchUpType(tf)
{
if(tf)
str='<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;">'
else
str='<input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;">'
document.all.file1.outerHTML=str;
document.all.UploadButton.disabled=true;
MsgList.innerHTML="";
}
</script>
<form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;">
<fieldset style="width: 372; height: 60;padding:2px;">
<legend><font color="#FF0000">图片来源</font></legend>
<input type="radio" name="radio1" checked onclick="SwitchUpType(true);">本地<input type="radio" name="radio1" onclick="SwitchUpType(false);">远程：<input type="file"
name="file1" onchange="CheckExt(this)" style="width:180px;"> <input type="submit" id="UploadButton" value="开始上传" disabled>
<div style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;">
<table border="0"><tr><td width="60" id="PreviewImg">预览区</td><td id="MsgList" valign="top"></td></tr></table>
</div>
</fieldset>
</form>
-------------------------------------------------------------------
在<form onsubmit="return chExtion()">里用js进行检查
function ExtendCheck()
{
if(document.all.UpFile.value == "")
{
alert("请先选择要上传的照片！");
return false;
}
else{var pathname = window.Form1.UpFile.value;
var num = pathname.lastIndexOf(".");
var exname = pathname.substr(num+1,pathname.length - num);
switch(exname.toLowCase()){
//此处修改允许的文件类型，必须是小写
case "jpg":
case "gif":
case "bmp":
case "jpge":
return true;
break;
default:
alert("文件类型不正确");
return false;
break;
}
}
}
相关推荐
首先，JavaScript本身并不支持直接处理文件上传，因为它存在跨域安全限制。然而，通过HTML5的File API，我们可以读取和处理用户选择的本地文件。File API允许用户在不离开页面的情况下预览、读取和操作文件，为多...
javascript 实现限制上传文件大小
5. 安全性考虑：限制上传文件类型、大小，防止恶意文件上传和DoS攻击。 在实际应用中，为了保证上传的稳定性和安全性，还需要对文件进行验证，如检查文件类型、大小，甚至进行病毒扫描。此外，为了优化用户体验，...
ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的，但对于新手来说，控制文件上传类型是一个难题。例如，我们只想让用户上传特定的文件类型，例如txt文件，那么如何实现当用户上传非txt文件时，给出...
### JS判断上传文件的大小类型等限制 在Web开发中，文件上传是一个常见的功能需求。为了确保用户体验并防止服务器资源被滥用，前端通常需要对上传的文件进行一系列的验证，如文件大小、文件类型等。本文将详细介绍...
"限制上传文件类型代码"这个主题就是针对这一需求的解决方案。在JavaScript中，我们可以通过前端和后端两方面来实现这样的功能。 首先，前端限制主要涉及到HTML5的`<input type="file">`元素。在创建文件上传表单时...
"上传文件jsweb前端（包含文件格式限制）"这个项目旨在提供一个完整的前端文件上传解决方案，它不仅支持基本的文件上传操作，还包含了对文件格式和大小的严格限制，以确保用户上传的数据符合预设的标准，类似于163...
### 使用jQuery过滤上传文件的类型和限制文件大小 在Web开发中，经常需要处理用户上传文件的功能。为了确保系统的安全性和提高用户体验，开发者通常需要对上传的文件进行一系列的检查，比如验证文件类型是否符合...
项目中经常用到需要上传文件、照片等功能，同时需要限制所上传文件的大小。很多插件都会采用后台请求验证，前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 <html> <...
代码是从一个论坛找到的，程序简单易懂，现在不用分共享给需要的人
2. 检查文件：确保上传的文件符合安全和格式要求，如大小限制、文件类型等。这可以通过检查`ContentLength`属性（文件大小）、`FileName`属性（文件名）以及可能的话，通过读取文件头信息判断文件类型。 3. 保存...
本项目"Flash选择多文件上传，可限制选择文件类型"聚焦于利用Adobe Flash技术实现一个支持批量上传并能限制文件类型的解决方案。下面将详细阐述相关知识点。 首先，我们要了解**Flash**。Flash是一款曾经广泛使用的...
综上所述，Uploadify 是一个强大且灵活的多文件上传解决方案，其文件类型限制功能确保了上传的安全性，而丰富的配置选项和事件处理则赋予了开发者极大的定制空间。通过对提供的文件进行研究和实践，你可以更好地理解...
标题 "51aspxUploads.rar_上传图片_上传文件_图片上传_批量上传_批量上传" 提供的信息表明，这个压缩包包含了一个用于处理文件上传功能的解决方案，特别是针对图片上传和批量上传的需求。在互联网应用中，文件上传是...
组件可能还提供了错误处理机制，以应对文件大小超出限制、文件类型不合法等情况。 总的来说，这个“免费的JSP多文件上传组件”是一个便捷的工具，可以帮助开发者在JSP应用中轻松实现文件上传功能，而无需从头编写...
在前端开发中，上传文件是一项...总之，原生JavaScript提供了一套完整的API来处理文件上传，这使得开发者可以根据具体需求自由定制功能，而不受第三方库的限制。熟练掌握这些技术，对于前端开发者来说是非常重要的。
6. **文件大小和类型的检查**：为了确保上传的安全性和系统稳定性，ntsky 提供了文件大小限制和文件类型检查机制。开发者可以设置上传文件的最大尺寸，防止大文件导致服务器过载，同时通过文件类型检查防止恶意文件...
对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法（实例） 》：http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。
在网页应用中，用户上传文件是一项常见的功能，但为了服务器性能和用户体验，通常需要对上传文件的大小进行限制。本文将深入探讨如何使用JavaScript来实现这一功能，通过前端验证，防止大文件上传导致的网络延迟或者...
这通常通过检查文件类型、限制文件大小或使用安全的文件命名策略来实现。 8. **异常处理**： 文件操作可能会遇到各种错误，如文件不存在、磁盘空间不足等。良好的异常处理机制能确保这些错误被适当地捕获并处理，...