原文地址:https://www.jb51.net/article/43498.htm

需要脚本在客户端判断大小和文件类型,由于网上没有适合的,就自己写了一个并测试 文件上传大小限制的一个例子,在此与大家分享下
 
由于项目需要!需要脚本在客户端判断大小和文件类型!自己网上找资料找的好辛苦!索性自己写了一个并测试 文件上传大小限制的一个例子,兼容ie6,ie7,ie8 ,Google Chrome,ff等浏览器

复制代码代码如下:
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 
function fileChange(target,id) { 
var fileSize = 0; 
var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"]; 
var filepath = target.value; 
var filemaxsize = 1024*2;//2M 
if(filepath){ 
var isnext = false; 
var fileend = filepath.substring(filepath.indexOf(".")); 
if(filetypes && filetypes.length>0){ 
for(var i =0; i<filetypes.length;i++){ 
if(filetypes[i]==fileend){ 
isnext = true; 
break; 



if(!isnext){ 
alert("不接受此文件类型!"); 
target.value =""; 
return false; 

}else{ 
return false; 

if (isIE && !target.files) { 
var filePath = target.value; 
var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); 
if(!fileSystem.FileExists(filePath)){ 
alert("附件不存在,请重新输入!"); 
return false; 

var file = fileSystem.GetFile (filePath); 
fileSize = file.Size; 
} else { 
fileSize = target.files[0].size; 
}

var size = fileSize / 1024; 
if(size>filemaxsize){ 
alert("附件大小不能大于"+filemaxsize/1024+"M!"); 
target.value =""; 
return false; 

if(size<=0){ 
alert("附件大小不能为0M!"); 
target.value =""; 
return false; 


</script> 
</head> 
<body> 
<input type="file" name="contractFileName" onchange="fileChange(this);"/> 
</body> 
</html>

[转]客户端js判断文件类型和文件大小即限制上传大小的更多相关文章

  1. 客户端js判断文件类型和文件大小即限制上传大小

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. js判断文件类型大小并给出提示

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...

  3. JS判断浏览器类型,JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

  4. JavaScript根据文件名判断文件类型

    //JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",& ...

  5. Linux中用st_mode判断文件类型

    Linux中用st_mode判断文件类型 2012-12-11 12:41 14214人阅读 评论(4) 收藏 举报  分类: Linux(8)  C/C++(20)  版权声明:本文为博主原创文章, ...

  6. PHP取二进制文件头快速判断文件类型

    <?php /*文件扩展名说明 *7173 gif *255216 jpg *13780 png *6677 bmp *239187 txt,aspx,asp,sql *208207 xls.d ...

  7. 通过JS判断联网类型和连接状态

    通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现 ...

  8. java文件上传,自动判断文件类型

    public enum FileType { /** * JEPG. */ JPEG("FFD8FF"), /** * PNG. */ PNG("89504E47&quo ...

  9. Python之基于十六进制判断文件类型

    核心代码: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Author : suk import struct from io import Byt ...

随机推荐

  1. Spark 常见问题集合

    一.Spark 为什么比 MapReduce 要高效? 举一个例子: select a.state,count(*),AVERAGE(c.price) from a join b on (a.id=b ...

  2. JVM笔记(二)JVM基本结构

    JVM基本结构 一.运行时内存区域 java虚拟机所管理的内存将会包括以下几个运行时内存区域. 1.程序计数器 Program Counter Register:可以看作当前线程(线程私有)所执行的字 ...

  3. STM新建项目

    STM新建项目,为以后开发提供更好的平台,项目代码分级分类管理,便于查看. 1.新建一个文件夹,在里面分别新建固件库.内核.用户文件夹. 在网上下载STM32F10x_StdPeriph_Lib_V3 ...

  4. Leetcode 记录(101~200)

    Now, I want to just use English to explain the problem, it's about two month before the interview, s ...

  5. Scrapy 使用CrawlSpider整站抓取文章内容实现

    刚接触Scrapy框架,不是很熟悉,之前用webdriver+selenium实现过头条的抓取,但是感觉对于整站抓取,之前的这种用无GUI的浏览器方式,效率不够高,所以尝试用CrawlSpider来实 ...

  6. GDOI2017爆炸记

    100种方法教你爆零.. 总结 其实这一次比赛除了三个sb的错误还是收获到了很多的.. 起码自己已经知道自己有进队的实力 不足的地方很大 主要是脑子不太好使,题目要不只能拿最暴力的分要不就能a 看了很 ...

  7. 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第4章编程练习7

    #include <iostream>using namespace std;struct Pizza{ char company[50]; float diameter; float w ...

  8. 创建触发器(trigger)

    创建触发器 DROP TRIGGER IF EXISTS `ins_table_name`; DELIMITER ;; CREATE TRIGGER `ins_table_name` AFTER IN ...

  9. angular $digest already in progress

    angular.js:11706 Error: [$rootScope:inprog] $digest already in progresshttp://errors.angularjs.org/1 ...

  10. js,css文件更新之后,浏览器端还有缓存,久久不能消除

    解决方案,每次更新之后修改下配置信息 /// <summary> /// VersionInfo 版本信息 /// </summary> public static class ...