HTML ajax 上传文件限制文件的类型和文件大小
html
<input type="file" name="excel" id="excel_input" accept=".doc,.docx,.xls,.xlsx" onchange ="uploadFile(this,1)"/>
js
function getFileType(filePath){
//获取文件的后缀名
var startIndex = filePath.lastIndexOf(".");
if(startIndex != -1)
return filePath.substring(startIndex+1, filePath.length);
else return "";
}
function uploadFile(obj, type) {
var filePath = $("#excel_input").val();
if("" != filePath){
var fileType = getFileType(filePath);
//判断上传的附件是否为word文件和excel文件
if("doc"!=fileType && "docx"!=fileType && "xls"!=fileType && "xlsx"!=fileType ){
$("#excel_input").val("");
alert("请上传表格文件");
}
else{
//获取附件大小(单位:KB)
var fileSize = document.getElementById("excel_input").files[0].size / 1024;
if(fileSize > 500){
alert("文件大小不能超过500KB");
$("#excel_input").val("");
} else{
var formData = new FormData();
var name = $("#excel_input").val();
formData.append("excel",$("#excel_input")[0].files[0]); // 获取文件的内容
formData.append("name",name); //文件的路径
$.ajax({
type: 'POST',
processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
contentType : false, // 不设置Content-type请求头
url : "/admin/user/addusers", //填你自己的路劲
data:formData,
dataType : 'json',// 返回值类型 一般设置为json
success : function(data) {// 服务器成功响应处理函数
alert("上传成功");
// window.location.reload();//上传成功后刷新页面
},
error : function(data){
alert("服务器异常");
}
});
}
}
}
return false;
}
HTML ajax 上传文件限制文件的类型和文件大小的更多相关文章
- BatsingJSLib 2.3、Ajax上传多个文件
//2.3Ajax上传单个或多个文件 //<input type="file" multiple="multiple"/> //参数:文件的表单JD ...
- 框架基础:ajax设计方案(三)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- asp.net MVC ajax上传文件
普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- FormData对象实现文件Ajax上传
后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...
- ajax上传文件,并检查文件类型、检查文件大小
1.使用ajaxfileupload.js的插件,但是对插件做了一处修改,才能够正常使用 修改的部分如下: uploadHttpData: function (r, type) { var data ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
随机推荐
- iOS开发过程中使用Core Data应避免的十个错误
原文出处: informit 译文出处:cocoachina Core Data是苹果针对Mac和iOS平台开发的一个框架,主要用来储存数据.对很多开发者来说,Core Data比较容易入手,但很 ...
- hdu 1525 Euclid's Game【 博弈论】
Two players, Stan and Ollie, play, starting with two natural numbers. Stan, the first player, subtra ...
- HDU 6278 - Just h-index - [莫队算法+树状数组+二分][2018JSCPC江苏省赛C题]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6278 Time Limit: 6000/3000 MS (Java/Others) Memory Li ...
- 浅谈jvm中的垃圾回收策略
下面小编就为大家带来一篇浅谈jvm中的垃圾回收策略.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 java和C#中的内存的分配和释放都是由虚拟机自动管理的,此前我已 ...
- MySQL复制原理
mysql从3.23开始提供复制功能,复制指将主库的ddl和dml操作通过binlog文件传送到从库上执行,从而保持主库和从库数据同步.mysql支持一台主库同时向多台从库复制,从库同时也可以作为其他 ...
- The third column indicates whether subclasses of the class declared outside this package have access to the member.;
总结1.modifier 改性剂 修饰符 修饰语 调节器access modifier 访问修饰符 存取权限 存取修饰词 存取修饰字官网“can”Access level modifiers dete ...
- LDAP summary-- Python ldap
A DN is comprised of a series of RDNs (Relative Distinguished Names) found by walking UP the tree (D ...
- 2018/03/28 每日一个Linux命令 之 mkdir/rmdir
用于建立空文件夹和删除文件夹 -- 两命令重要参数 -p 递归建立/删除 -- 例如 mkdir -p demo1/demo2/demo3 建立demo3空文件夹,如果demo1/demo2没建立也建 ...
- LightOj 1104 - Birthday Paradox(生日悖论概率)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1104 题意:一年365天,在有23个人的情况下,这23个人中有两个人生日相同的概率是大 ...
- mysql 字符串类型 char varchar
字符类型用在存储名字.邮箱地址.家庭住址等描述性数据 char指的是定长字符,varchar指的是变长字符 #官网:https://dev.mysql.com/doc/refman/5.7/en/ ...