1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script type="text/javascript">
  5. var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
  6. function fileChange(target,id) {
  7. var fileSize = 0;
  8. var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
  9. var filepath = target.value;
  10. var filemaxsize = 1024*2;//2M
  11. if(filepath){
  12. var isnext = false;
  13. var fileend = filepath.substring(filepath.indexOf("."));
  14. if(filetypes && filetypes.length>0){
  15. for(var i =0; i<filetypes.length;i++){
  16. if(filetypes[i]==fileend){
  17. isnext = true;
  18. break;
  19. }
  20. }
  21. }
  22. if(!isnext){
  23. alert("不接受此文件类型!");
  24. target.value ="";
  25. return false;
  26. }
  27. }else{
  28. return false;
  29. }
  30. if (isIE && !target.files) {
  31. var filePath = target.value;
  32. var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
  33. if(!fileSystem.FileExists(filePath)){
  34. alert("附件不存在,请重新输入!");
  35. return false;
  36. }
  37. var file = fileSystem.GetFile (filePath);
  38. fileSize = file.Size;
  39. } else {
  40. fileSize = target.files[0].size;
  41. }
  42. var size = fileSize / 1024;
  43. if(size>filemaxsize){
  44. alert("附件大小不能大于"+filemaxsize/1024+"M!");
  45. target.value ="";
  46. return false;
  47. }
  48. if(size<=0){
  49. alert("附件大小不能为0M!");
  50. target.value ="";
  51. return false;
  52. }
  53. }
  54. </script>
  55. </head>
  56. <body>
  57. <input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>
  58. </body>
  59. </html>

前端js限制上传文件类型及大小(1)的更多相关文章

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

    <html> <head> <script type="text/javascript"> function fileChange(target ...

  2. JS判断上传文件类型

    /*   * 判断图片类型   */    function checkImgType(ths){        if (ths.value == "") {            ...

  3. JS 判断上传文件类型

    var video_src_file = $("#video_src_file").val(); var fileTypes = new Array("flv" ...

  4. input type='file'限制上传文件类型

    前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛 ...

  5. js能否上传文件夹

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  6. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  7. 前端之web上传文件的方式

    前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...

  8. 第九篇:web之前端之web上传文件的方式

    前端之web上传文件的方式   前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...

  9. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

随机推荐

  1. uva 133解题报告

    题目描述 为了缩短领救济品的队伍,NNGLRP决定了以下策略:每天所有来申请救济品的人会被放在一个大圆圈,面朝里面.选定一个人为编号 1 号,其他的就从那个人开始逆时针开始编号直到 N.一个官员一开始 ...

  2. python连接mysql数据库遇到的问题

    1.源代码: from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker from sqlalchemy ...

  3. robotframework自动化测试之测试数据

    相信很多人在做自动化测试的时候都会遇到一个问题,就是用例不能重复执行,比如名称不能重复,手机号码不能重复等等问题,或者在测试用例执行完后通过操作数据库把相关的数据删除: 那么怎么样让我们的测试用例能重 ...

  4. SQL---MySQL数据库---聚合函数

    1.数值 format(x,n) 将x格式化为  由逗号分隔,小数点后n 位的数:

  5. Django-5.1 模型层 单表操作

    7.1 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开 ...

  6. SQL事务的四种隔离级别

    1未提交读(Read uncommitted):完全不锁表,所以会出现脏数据.2提交读(Read committed):1.事务1中update才锁表,可以select到最新数据. 事务2select ...

  7. 性能测试工具LoadRunner26-LR之lr脚本插入DOS命令

    基础命令 1.dir 无参数:查看当前所在目录的文件和文件夹 /s:查看当前目录其所有子目录的文件和文件夹 /a:查看包括隐含文件的所有文件 /ah:只显示隐含文件 /w:以紧凑方式显示文件和文件夹 ...

  8. [转]HTML字符实体(Character Entities),转义字符串(Escape Sequence)

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  9. [转]jQuery Mobile: Get data passed to page via changePage mobile.changePage

    本文转自:http://stackoverflow.com/questions/15840611/jquery-mobile-get-data-passed-to-page-via-changepag ...

  10. OpenStack概念

    OpenStack is a global collaboration ofdevelopers and cloud computing technologists producing the ubi ...