随笔 - 66, 文章 - 0, 评论 - 0, 阅读 - 28828

h5方式

accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型

demo:

 <form>
  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>
 
<!-- 如果不限制图像的格式，可以写为：accept="image/*"。 -->

js方式

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>
 
<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.lastIndexOf("."));
            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>
 
</body>
</html>

posted on 2019-12-27 15:20 蒸汽小工人阅读(1513) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

2025年3月

日

一

二

三

四

五

六

昵称：蒸汽小工人
园龄： 5年6个月
粉丝： 7
关注： 7

+加关注

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<form>
	<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
	</form>

	<!-- 如果不限制图像的格式，可以写为：accept="image/*"。 -->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>

	<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.lastIndexOf("."));
	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>

	</body>
	</html>