关键词：
今天在工作中遇到一个需求，需要在上传文件的时候限制上传文件的类型，比如上传图片的就只能上传图片类型的文件。 现将自己在开发中的代码放到我的博客里，以备在以后的开发中再次遇到。就可以直接使用了。
这里就放一个小demo了。代码如下：
<!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.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>
</body>
</html>
限制文件类型上传组件
】限制文件类型上传组件【英文标题】：Restrictingfiletypesuploadcomponent【发布时间】：2014-03-2117:36:30【问题描述】：我正在使用vaadin（7.1.9）的上传组件，现在我的问题是我无法限制可以使用上传组件发送到服务器的文件类型，但... 查看详情
上传文件类型限制?
为了网站的安全，做上传程序时，请问该限制哪些类型的文件，才不会给哪些黑良心的东西有可趁之机？网站是C#/.NET。注意，朋友们不要答离题啊，哈哈，我是问应该要限制哪些类型的文件，而不是怎样限制文件类型啊。其实... 查看详情
Cloudinary 小部件：设置资源类型不限制用户可以上传的文件类型
】Cloudinary小部件：设置资源类型不限制用户可以上传的文件类型【英文标题】：Cloudinarywidget:Settingresourcetypedoesnotlimitthetypeoffilestheusercanupload【发布时间】：2020-12-1001:59:00【问题描述】：根据documentation，这是您限制用户可以上传... 查看详情
如何在 GCDWebUploader 中限制上传文件类型/格式
】如何在GCDWebUploader中限制上传文件类型/格式【英文标题】：Howtolimituploadfiletype/formatinGCDWebUploader【发布时间】：2019-10-1415:05:24【问题描述】：我的应用涉及将音频文件上传到iPhone沙箱的GCDWebUploader。它运行良好，但我想限制用... 查看详情
struts2之限制文件上传类型
...义了setAllowedExtensions(String)和setAllowedTypes(String)两种方法来限制文件上传类型1、setAllowedExtensions(String)设置允许上传的文件后缀名，setAllowedTypes(String)设置了允许上传文件的类型，推荐使用setAllowedTypes(String)。因为如 查看详情
限制 Dropzone 仅上传特定类型的文件
】限制Dropzone仅上传特定类型的文件【英文标题】：RestrictDropzonetouploadonlyspecifictypeoffiles【发布时间】：2018-06-1511:00:50【问题描述】：我正在使用Dropzone上传文件，这是我的代码<div><formid="mainDiv"class="dropzoneneedsclick"enctype="mul... 查看详情
PHP 上传 MIME 类型限制
】PHP上传MIME类型限制【英文标题】：PHPuploadMIMEtyperestrictions【发布时间】：2016-01-2511:03:27【问题描述】：我在一个站点中有一个文件上传系统，它允许上传.doc、.docs和.pdf文件。目前PHP脚本允许上传任何文件类型。我想限制它只... 查看详情
如何使用 FileFields 限制 ModelForms 文件上传的文件类型？
】如何使用FileFields限制ModelForms文件上传的文件类型？【英文标题】：HowtolimitfiletypesonfileuploadsforModelFormswithFileFields?【发布时间】：2011-09-2114:18:53【问题描述】：我的目标是将DjangoModelForm上的FileField限制为PDF和Word文档。我用谷歌... 查看详情
inputfile实现多选和限制文件上传类型
...tiple属性设置可多文件上传--><!--accept并未真正的实现限制上传文件类型，只是在选文件的时候有限制， 如果选文件的时候手动修改上传文件的类型，还是可以上传其他文件的。 因此，要实... 查看详情
前端——利用filesignature精准校验文件类型
参考技术A背景：在进行文件上传时，往往需要对上传文件的类型进行限制。最简单也是最常用的文件类型校验方法，是直接校验文件的拓展名，但由于拓展名可以手动随意修改，因此这种方式并不保险。那么有没有什么方法可... 查看详情
前端-接入层上传问题(代码片段)
接入层上传上传问题上传文件再次访问上传的文件上传的文件被当成程序解析上传问题防御限制上传后缀letext=path.extname(file.name);if(ext===".js")thrownewError("不要上传坏文件");但是可以通过改后缀名的方式，达到攻击的... 查看详情
s3直接上传限制文件大小和类型
】s3直接上传限制文件大小和类型【英文标题】：s3directuploadrestrictingfilesizeandtype【发布时间】：2012-11-0315:05:57【问题描述】：一个新手问题，但我用谷歌搜索了一下，似乎找不到任何解决方案。我希望允许用户直接将文件上传到... 查看详情
文件上传漏洞与利用
...PHP中$_files数组的使用方法 1.2PHP文件上传源代码 前端上传页面：upfile.php 上传处理程序：upload.php 1.3PHP文件上传过程分析 2文件上传风险：允许用户上传文件是一个巨大的安全风险。攻击者可以通过上传文... 查看详情
fileupload控件文件上传扩容限制文件类型及上传验证
1、将选中文件上传到目标位置：<spanstyle="white-space:pre"></span>//获取上传文件的文件名称stringname=FileUpload1.FileName;//将文件名称拼接成为想要的相对路径stringpath="images/"+DateTime.Now.ToString("yyyyMMddhhmmss")+name;//执行另存为方 查看详情
上传图片限制大小类型判断像素判断(代码片段)
...文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。1<inputtype="file"name="files"id="file"onchange="v 查看详情
在 JQuery 文件上传演示中限制文件类型
】在JQuery文件上传演示中限制文件类型【英文标题】：RestrictingfiletypesinJQueryFileuploaddemo【发布时间】：2012-08-3111:37:54【问题描述】：我正在使用JQueryfileuploaddemo进行下一个Codeigniter项目。谁能告诉我如何实现以下目标：将上传文... 查看详情
vue里怎么通过魔数（magicnumber）去限制上传文件类型？(代码片段)
利用input的accept属性进行限制accept属性规定了可通过文件上传提交的服务器接受的文件类型。<inputtype="file">不限制，上传这里的话就会显示所有的文件。限制格式1<inputtype="file"accept=".pdf,.xls,.txt&#... 查看详情
vue里怎么通过魔数（magicnumber）去限制上传文件类型？(代码片段)
利用input的accept属性进行限制accept属性规定了可通过文件上传提交的服务器接受的文件类型。<inputtype="file">不限制，上传这里的话就会显示所有的文件。限制格式1<inputtype="file"accept=".pdf,.xls,.txt&#... 查看详情