JS限制上传文件类型和大小（不是宽…

最新推荐文章于 2021-03-10 00:47:12 发布
最新推荐文章于 2021-03-10 00:47:12 发布
阅读量474 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyb_icanplay7/article/details/8493027
版权
来个例子吧：
<html>   
<head>   

<scripttype="text/javascript">   

function fileChange(target){ 
//检测上传文件的类型 
var imgName =document.all.up_file.value;
    var ext,idx;  
    if(imgName == ''){  
     document.all.submit_upload.disabled=true; 
       alert("请选择需要上传的文件!"); 
      return; 
    }else {   
       idx =imgName.lastIndexOf(".");  
       if (idx != -1){  
          ext = imgName.substr(idx+1).toUpperCase();  
          ext = ext.toLowerCase(); 
         // alert("ext="+ext);
          if (ext != 'jpg'&& ext != 'png'&& ext != 'jpeg'&& ext != 'gif'){
           document.all.submit_upload.disabled=true;  
             alert("只能上传.jpg  .png  .jpeg .gif类型的文件!"); 
              return; 
          }  
       } else { 
        document.all.submit_upload.disabled=true; 
         alert("只能上传.jpg  .png .jpeg .gif类型的文件!"); 
          return;
       }  
   }
   
   //检测上传文件的大小       
   var isIE = /msie/i.test(navigator.userAgent)&& !window.opera; 
   var fileSize = 0;         
    if(isIE && !target.files){     
       var filePath = target.value;     
       var fileSystem = newActiveXObject("Scripting.FileSystemObject");        
       var file = fileSystem.GetFile(filePath);      
       fileSize = file.Size;    
    }else {     
       fileSize =target.files[0].size;      
    }   

   var size = fileSize / 1024*1024;  

   if(size>(1024*200)){   
   document.all.submit_upload.disabled=true;
       alert("文件大小不能超过200KB");  
   }else{
   document.all.submit_upload.disabled=false;
    }   
}    
</script>   
</head>   
<body>   
<input type="file"id="up_file" name="up_file" οnchange="fileChange(this);"/>                
<input id="submit_upload"type="submit" class="load-btn" value="上传" disabled/>   
</body>   
</html> 
ZYaller
关注
专栏目录
zyupload 进行源码改造 上传图片限制一张
liwei10822的博客
01-11 633
zyupload 进行源码改造 上传图片限制一张
js 限制图片上传的格式与大小
田雅雯的博客
03-22 5090
beforeUpload(file) {//图片上传之前校验 const isPNG = file.type === 'image/png'; const isLt200k = file.size/1024 &lt; 200; if (!isPNG) { this.$me...
js限制上传文件大小及类型
lm技术分享
01-09 3783
//检测图片格式及大小 function checkImageSize(obj){ photoExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名 var ext_array = ['.jpg','.gif','.jpeg','.png']; if(!in_array(photo
zyupload php,zyupload四种不同的上传PHP版
weixin_42298279的博客
03-10 282
插件描述：PHP支持拖拽和裁剪的一款上传插件：zyupload。在js里面可以自定义高度和宽度，类型，远程上传地址等。zyupload上传基本配置$("#zyupload").zyUpload({width:"650px",//宽度height:"400px",//宽度itemWidth:"140px",//文件项的宽度itemHeight:"115px",//文件项的高度...
客户端js判断文件类型和文件大小即限制上传大小
10-26
在网页应用中，文件上传是常见的功能之一，但为了提高用户体验和服务器性能，通常需要在客户端进行文件类型的检查和大小限制。这篇分享的代码提供了一种JavaScript实现方式，用于在客户端判断用户选择的文件是否符合...
原生JS上传文件，获取文件二进制数据及文件大小和文件名称
07-07
在前端开发中，上传文件是一项...总之，原生JavaScript提供了一套完整的API来处理文件上传，这使得开发者可以根据具体需求自由定制功能，而不受第三方库的限制。熟练掌握这些技术，对于前端开发者来说是非常重要的。
javascript实现限制上传文件大小
10-24
本文将详细讲解如何使用JavaScript实现限制上传文件大小。 首先，我们需要了解JavaScript获取文件大小的基本方法。在现代浏览器中，`<input type="file">`元素的`files`属性可以返回一个`FileList`对象，其中包含了...
限制ckeditor上传图片文件大小的方法
10-26
在使用CKEditor这样的富文本编辑器时，有时我们需要对用户上传的图片文件大小进行限制，以防止服务器存储空间被大量占用或服务器性能受到影响。本文主要介绍两种方法来限制CKEditor（此处指旧版本的Fckeditor）上传...
input type=file accept中可以限制的文件类型
小学徒成长专栏
06-15 883
在上传文件的时候，需要限制指定的文件类型，accept这个属性，只在FF和chrome中有效。那么accept能限制哪些文件呢？见下表。 扩展名 MIME 描述 *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video *.ac3 audio/ac3 AC3 Audio *.asf allpicatio...
设置上传文件的最大大小
weixin_33763244的博客
07-10 265
在web.config中添加httpRuntime元素,如下：&lt;configuration&gt;   &lt;system.web&gt;      &lt;httpRuntime maxRequestLength="8192"         useFullyQualifiedRedirectUrl="true"         executionTimeout="45"        ...
JS 限制上传文件类型
vleess的博客
04-20 5126
直接上代码，网上看的，自己改了BUG。实测。 html代码 &lt;input type="file" name="ksjh_file" class="ui_hidden" id="uploadksjh" accept="xls,xlsx" onchange="checkFileType(this)"&gt; JS代码 //限制文件上传类型 function c
zyupload上传实例
蒯厅博客
08-26 2134
页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>zyupload上传实例</title> <link rel="stylesheet" href="lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all"> </head> <
判断上传文件是否是Excel文件
发现新鲜
03-02 5417
  function doCheck(varCurObj) {  var varCurValue = varCurObj.value;  var varSufType = varCurValue.substring(varCurValue.lastIndexOf(".") + 1, varCurValue.length);  if (varCurValue.length == 0) {   d
文件上传限制格式及大小
热门推荐
fengxiaopeng74的博客
07-12 1万+
&lt;input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/&gt; &lt;script type="text/javascript"&gt; var isIE = /msie/i.test(navigator.userAgent)
js判断上传文件大小 (尝试网上解决方案后结果....)
zero_295813128的专栏
08-11 9684
"text/javascript">      var isIE = /msie/i.test(navigator.userAgent) && !window.opera;            function fileChange(target) {                 var fileSize = 0;               if (isIE && !target
js判断图片上传时的文件大小、类型，和宽高尺寸
cillent_boy的专栏
04-19 4699
如何读取图片的size、type 首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图： 这样的话，我们就可以检测到size。 var fileData = file.files[0]; var size = fileData.size...
使用JavaScript限制上传文件大小和类型
本文档介绍了如何使用JavaScript在网页上控制用户上传文件的大小和类型。通过JavaScript，我们可以实现对用户选择的文件进行实时验证，确保它们符合我们设定的限制条件。 在HTML部分，可以看到一个简单的表单，包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值