js限制上传文件的类型和大小

var maxsize = 6*1024*1024;//6M
var errMsg = "上传的附件文件不能超过6M!!!";
var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过6M,建议使用IE、FireFox、Chrome浏览器。";
var browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE")>=1){
browserCfg.ie = true;
}else if(ua.indexOf("Firefox")>=1){
browserCfg.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
browserCfg.chrome = true;
}

function checkfile(){
try{
var obj_file = document.getElementById("instructionName");
if(obj_file.value==""){
alert("请选择上传文件");
return;
}
if(!/\.(doc|xls|pdf|xlsx|pptx|docx|ppt)$/.test(obj_file)){
alert("上传文件只能是doc|xls|pdf|xlsx|pptx|docx|ppt为后缀文件");
$("#instructionName").val(‘‘);
return;
}
var filesize = 0;
if(browserCfg.firefox || browserCfg.chrome ){
filesize = obj_file.files[0].size;
}else if(browserCfg.ie){
var obj_img = document.getElementById(‘tempimg‘);
obj_img.dynsrc=obj_file.value;
filesize = obj_img.fileSize;
}else{
alert(tipMsg);
$("#instructionName").val(‘‘);
return;
}
if(filesize==-1){
alert(tipMsg);
return;
}else if(filesize>maxsize){
alert(errMsg);
return;
}else{
document.getElementById("bigsmall").value=filesize;
return;
}
}catch(e){
alert(e);
}
}

<input id="instructionName" type="file" name="instructionName" value="" onchange="checkfile()" style="width:80"/>

<input type="hidden" id="bigsmall" name="bigsmall" value="" />

时间: 2024-07-31 14:54:09

js限制上传文件的类型和大小的相关文章

JS 限制上传文件的类型和大小

<!DOCTYPE html> <!-- saved from url=(0035)http://localhost:9090/qraved/update --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> &l

Atitit.js获取上传文件全路径

1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用applet插件 2 5. 参考 3 1. 默认的value只能获取文件名..安全原因.. js是无法获取file 控件的值的,你要获取的话可以通过后台程序语言用json或者xml之类的格式来返回被上传的文件路径. file是一种特殊的input,不能被赋值,也不能被javascript取值,只能随表单提交,而且随表单提交的也是file路

js能否上传文件夹

文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹.今天研究了一下这个问题,在此记录. 先说两个问题: 是否所有后端框架都支持文件夹上传? 是否所有浏览器都支持文件夹上传? 第一个问题:YES,第二个问题:NO 只要后端框架对于表单的支持是完整的,那么必然支持文件夹上传.至于浏览器,截至目前,只有 Chrome 支持. 如果需要其它的浏览器支持则需要

jS Ajax 上传文件报错&quot;Uncaught TypeError: Illegal invocation&quot;

jS Ajax 上传文件报错"Uncaught TypeError: Illegal invocation" query-3.1.1.min.js:4 Uncaught TypeError: Illegal invocation 错误原因: jQuery Ajax 上传文件处理方式, 使用ajax向后台发送数据时其中的图片数据的参数类型为file,属于对象,而不是一个字符串值.导致错误的出现 var formData = new FormData(); formData.append(

利用ajaxfileupload.js异步上传文件

1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="enclosure"> <button id="upClick" >上传</button> 注意这里的input控件的id和name必须一致:这样在后台利用springMVC接受文件的时候能对应起来: 3.JS代码 <script type=&q

MIME类型-服务端验证上传文件的类型

MIME的作用 : 使客户端软件,区分不同种类的数据,例如web浏览器就是通过MIME类型来判断文件是GIF图片,还是可打印的PostScript文件. web服务器使用MIME来说明发送数据的种类, web客户端使用MIME来说明希望接收到的数据种类. Tomcat的安装目录/conf/web.xml 中就定义了大量MIME类型 ,你可也去看一下. 最近在做用表单上传文件,想在服务端验证上传文件的类型,只允许上传GIF,JPG,ZIP, 我们有两种方法, 第一:检查文件的扩展名, 第二:检查文

前端限制上传文件的类型

今天在工作中遇到一个需求,需要在上传文件的时候限制上传文件的类型,比如上传图片的就只能上传图片类型的文件. 现将自己在开发中的代码放到我的博客里,以备在以后的开发中再次遇到.就可以直接使用了. 这里就放一个小demo了.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> &l

js图片上传验证图片格式和大小尺寸

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function getImageSize(obj){ var _file=document.getElementById("file

input type=&#39;file&#39; 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:) var isE