下面是我写的一个通用的javascrip脚本,虽然调用时需要赋的参数比较多,但都是实际需要中真正需要使用到的。各位可以参考,并改成自己需要的脚本。

/*****获取文件信息 edit by zhaogw 参考by misssionOtherAttEdit.jsp*****/ 
/*file:input type="file"的对象,一般用this。 
vType:一个对象名,用于记录文件的文件类型信息。一般为input对象。 
DivType:一个Div对象的名称。把其innerHTML内容用于显示文件的类型信息。 
vFile:一个对象名,用于记录文件的文件名信息。一般为input对象。 
DivFile:一个Div对象的名称。把其innerHTML内容用于显示文件的文件名信息。 
vSize,DivSize同上面类似,只是记录文件的大小信息。 
mMaxSize:以m为单位计算其允许上传的最大文件大小。 
allowType:只接受的文件类型 
*/ 
function getFileInfo(file,mMaxSize,allowType,vFile,DivFile,vType,DivType,vSize,DivSize){ 
var filePath = file.value;//文件路径 
var fileName;//文件名 
var fileType;//文件类型 
var tmpObj;//临时对象 
var notAllowType=new Array("exe","bat","asp","jsp","js","dll"); 
var mHTML=document.getElementById(file.name 'Td').innerHTML; 
/* 
var mHTML=""; 
*/ 
// alert(mHTML); 
//get file name 
if(filePath != null && filePath != ''){ 
var pass=true; 
//文件类型 
fileType = filePath.substring(filePath.lastIndexOf('.')   1,filePath.length); 
if (fileType!=null&&fileType!='') 
{ 
for (var i in notAllowType){ 
if (fileType.toLowerCase()==notAllowType[i]){ 
pass=false; 
break;} 
} 
} 
//允许的类型,空的话就不设置允许类型 
var match=false; 
if (allowType!=null&&allowType!=''){ 
var allowList=allowType.split('|'); 
for (var j in allowList){ 
if (fileType.toLowerCase()==allowList[j].toLowerCase()){ 
match=true; 
break;} 
} 
} else {match=true;} 
if (pass&&match) 
{ 
fileName = filePath.substring(filePath.lastIndexOf('\')   1,filePath.length); 
tmpObj=document.getElementById(vType); 
if (tmpObj!=null) 
tmpObj.value = fileType; 
tmpObj=document.getElementById(DivType); 
if (tmpObj!=null) 
tmpObj.innerHTML = fileType; 
tmpObj=document.getElementById(vFile); 
if (tmpObj!=null) 
tmpObj.value = fileName; 
tmpObj=document.getElementById(DivFile); 
if (tmpObj!=null) 
tmpObj.innerHTML = fileName; 
try{ 
var fso,f,s; 
fso = new ActiveXObject("Scripting.FileSystemObject"); 
f = fso.GetFile(file.value); 
if(f.Size > mMaxSize*1048576){ 
alert("文件大小不能超过" mMaxSize "M"); 
document.getElementById(file.name 'Td').innerHTML = mHTML; 
tmpObj=document.getElementById(vType); 
if (tmpObj!=null) 
tmpObj.value = ''; 
tmpObj=document.getElementById(DivType); 
if (tmpObj!=null) 
tmpObj.innerHTML = ''; 
tmpObj=document.getElementById(vFile); 
if (tmpObj!=null) 
tmpObj.value = ''; 
tmpObj=document.getElementById(DivFile); 
if (tmpObj!=null) 
tmpObj.innerHTML = ''; 
tmpObj=document.getElementById(vSize); 
if (tmpObj!=null) 
tmpObj.value = ''; 
tmpObj=document.getElementById(DivSize); 
if (tmpObj!=null) 
tmpObj.innerHTML = ''; 
return; 
} 
else 
{ 
tmpObj=document.getElementById(vSize); 
if (tmpObj!=null) 
tmpObj.value = f.Size; 
tmpObj=document.getElementById(DivSize); 
if (tmpObj!=null) 
tmpObj.innerHTML = f.Size " byte(字节)"; 
var imgType=new Array("jpg","jpeg","gif","bmp"); 
var isImg=false; 
//文件类型 
if (fileType!=null&&fileType!='') 
{ 
for (var k in imgType){ 
if (fileType.toLowerCase()==imgType[k]){ 
isImg=true; 
break;} 
} 
} 
var tmpObj=document.getElementById("imgView"); 
if (isImg&&tmpObj){ 
var y = document.getElementById(file.name "img"); 
if(y){ 
y.src = "file://localhost/"   file.value; 
}else{ 
var img=document.createElement("img"); 
img.setAttribute("src","file://localhost/" file.value); 
img.setAttribute("width","120"); 
img.setAttribute("height","90"); 
img.setAttribute("id",file.name "img"); 
tmpObj.appendChild(img); 
} 
}} 
}catch(e){ 
//ignore 
} 
} 
else if (!pass) {alert("不允许上传文件类型为:" fileType);document.getElementById(file.name 'Td').innerHTML = mHTML;} 
else if (!match) {alert("只允许上传文件类型为:" allowType);document.getElementById(file.name 'Td').innerHTML = mHTML;} 
} 
}

调用方法的代码:
 
 

需要显示当前上传图片的需要加入以下代码:

<div id="imgView">&nbsp;</div>

简单说明下脚本的相关约定:

1:如必须使用<td>对象来(或者别的有innerHTML属性的对象来包含着input的type="file"的对象,并且名称必须是input的name属性 "Td"为后缀)
2:imgView写死了,由于不想再加入更多的参数,因此,这里就固定这个了。大家也可以把名称作参数传递进去。看各位的方便了。
3:所有参数都可以为''但第一个参数基本上是this。脚本会自动去判断相关的参数的。

javascrip客户端验证文件大小及文件类型并重置上传的更多相关文章

  1. iOS启动图像文件类型

    我正在开发一个iPad应用并阅读thispage表示发布图像必须是PNG格式,但在他们的iOS人工指南中,/uploads/20230807/dfd8683904f6d24601aef1a1128c8fa9.png,而不是“必须”.我想使用.jpg格式作为我的发布图像,因为我在.png中的发布图像大小仅为2mb,而.jpg格式只有90kb.谢谢解决方法您需要在Info.plist中指定UILaunhImageFile字段设置此信息将使系统查找Default.jpg及其所有变体而不是.png例如,我正在编写

  2. xcode4 – 如何将excel文件类型(xlsx)与iPhone应用程序相关联

    您好,我已经通过向项目构建添加文档类型并将Types字段设置为“com.microsoft.excel.xls”(请参阅屏幕截图),通过邮件应用程序打开.xls文件.我想对xlsx文件做同样的处理,但不能做.我尝试添加“com.microsoft.excel.xlsx”但是没有起作用解决方法我通过定义自定义UTI解决了如下.尝试将这些定义添加到您的info.plist中.它按预期工作.….

  3. 为什么Android通过蓝牙OPP接收时严格限制可接受的文件类型?

    当我们通过其他非蓝牙协议传输文件时是否存在类似的限制?解决方法我把你的问题投了票,并在同一时间将其标记为非建设性的.这个问题很好,但是在错误的地方被问到:你需要在androidbug跟踪器中提交你的投诉作为错误/建议.为了回答你的问题–这是一种不让用户通过限制他对枪支和自己的脚进行射击来自我射击的倾向.也许自定义ROM不受此限制.

  4. node.js解决获取图片真实文件类型的问题

    这篇文章主要介绍了node.js解决获取图片真实文件类型的问题,本文根据二进制流及文件头获取文件类型mime-type,然后读取文件二进制的头信息,获取其真实的文件类型,需要的朋友可以参考下

  5. javascrip客户端验证文件大小及文件类型并重置上传

    为了提高效率,很多时候需要在web页面中对客户端上传的文件进行验证,然后再上传到服务器。

  6. Javascript 使用ajax与C#获取文件大小实例详解

    本文章向码农们介绍了js ajax获取文件大小的实例,涉及JavaScript调用ajax交互及后台C#文件操作的相关技巧,需要的朋友可以参考下

  7. PHP如何根据文件头检测文件类型实例代码

    这篇文章主要给大家介绍了关于PHP如何根据文件头检测文件类型的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用php具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. php文件类型MIME对照表(比较全)

    这篇文章主要介绍了php文件类型MIME对照表,需要的朋友可以参考下

  9. nodejs实现遍历文件夹并统计文件大小

    这篇文章主要介绍了nodejs实现遍历文件夹并统计文件大小,下面使用nodejs的遍历文件夹文件内容,并且读取所有的文件,并采取排序往大到小的顺序进行输出,需要的朋友可以参考下

  10. JS 文件大小判断的实现代码

    有时候我们的图片上传等功能,需要验证客户端的图片大小,比较只能上传小于100K的图片,这里客户端先简单的验证下。

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部