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. Java 字节流和字符流

    程序中都是以流的形式进行数据的传输和保存,在java.io包中数据流操作的两大类是字节流和字符流. 1. 字节流 InputStream和OutputStream是所有表示字节流的类的父类,它们都是抽 ...

  2. vue(2)创建项目

    1.创建项目 cmd到自己指定目录下,执行 vue init webpack-simple hello-vue 2.安装项目依赖 cd hello-vue cnpm install 3.运行该项目,测 ...

  3. /var 目录下文件系统

    /var    :日志文件/var/log:各种系统日志存放地*/var/log/message :系统信息默认日志文件 (非常重要)按周自动轮循/var/log/secure  :记录登入系统信息文 ...

  4. C实现shell管理的一个例子

    通常情况下,一个进程(比如cat /tmp/tt.txt)的输出与输入是标准输入(stdin或者0).标准输出(stdout或者1) shell 获取tt.txt文件中包含aa的行记录,涉及两个进程, ...

  5. my.资料__烹饪炼药

    ZC: 新区的时候,烹饪炼药 也不是 等级越高越好:等级越高需要的人可能少,价格高 但是买的人少:大家都在那个等级 很容易堵车 没有摊位... 刚开始 大家都穷 可能等级稍低的 反而好卖... ZC: ...

  6. mysql远程连接问题 Lost connection to MySQL server at ‘reading initial communication packet', system error: 0

    在用Navicat for MySQL远程连接mysql的时候,出现了 Lost connection to MySQL server at ‘reading initial communicatio ...

  7. maya2018无法安装卸载激活失败

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. vuex初探

    WW(是什么.为什么) 什么是vuex? 如果你学过react,那么你就更容易理解vuex,因为vuex相当于react中的redux,它是用于管理数据的工具.我们看一看官网的介绍: Vuex 是一个 ...

  9. IT方面书籍下载整理

    最近翻看Redis相关的中文书籍时,发现了很多错误,包括翻译错误及理论错误,因此想搜集一些相关的外文书籍看看.以下几个链接,内容大同小异,均可免费下载相关的英文书籍PDF版,内容涵盖了IT的方方面面. ...

  10. 【转】java序列化技术

    转自:http://blog.csdn.net/yakihappy/article/details/3979373 Java 串行化技术可以使你将一个对象的状态写入一个Byte 流里,并且可以从其它地 ...