JavaScript限制上传文件类型的代码

最新推荐文章于 2023-06-07 10:13:27 发布
最新推荐文章于 2023-06-07 10:13:27 发布
阅读量618 收藏 1
点赞数
分类专栏： JavaScript

JavaScript限制上传文件类型的代码

2009-06-28 15:42:56 | 【大 中 小】
好图网图标搜索引擎，提供超过60万的免费图标、PNG图标、ICO图标、ICNS图标、网页图标
.gif .jpg .png

本代码可以在客户端限制用户选择的上传文件类型

要完成此效果需要两个步骤

第一步：把如下代码加入到<head>区域中

01<SCRIPTLANGUAGE="JavaScript">
02 
03        /*****************************************************
04         *  Share JavaScript (http://www.ShareJS.com)
05         * 使用此脚本程序，请保留此声明
06         * 获取此脚本以及更多的JavaScript程序，请访问http://www.ShareJS.com
07         ******************************************************/
08     
09<!-- Begin
10extArray = new Array(".gif", ".jpg", ".png");
11function LimitAttach(form, file) {
12allowSubmit = false;
13if (!file) return;
14while (file.indexOf("\\") != -1)
15file = file.slice(file.indexOf("\\") + 1);
16ext = file.slice(file.indexOf(".")).toLowerCase();
17for (var i = 0; i < extArray.length; i++) {
18if (extArray[i] == ext) { allowSubmit = true; break; }
19}
20if (allowSubmit) form.submit();
21else
22alert("对不起，只能上传以下格式的文件:  "
23+ (extArray.join("  ")) + "\n请重新选择符合条件的文件"
24+ "再上传.");
25}
26//  End -->
27</script>


第二步：把如下代码加入到<body>区域中

01<script>
02document.write(extArray.join("  "));
03</script>
04<p>
05 
06<formmethod=postname=upformaction="http://www.sharejs.com"enctype="multipart/form-data">
07<inputtype=filename=uploadfile>
08<p>
09<inputtype=buttonname="Submit"value="Submit"onclick="LimitAttach(this.form, this.form.uploadfile.value)">
10</form>
努力的蜕变
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS上传文件
08-31
通过JS实现文件上传的组件，Uploadify。如有需要请下载。
限制上传文件类型特效代码
03-20
"限制上传文件类型特效代码"这个主题，涉及到的是如何通过编程代码来实现这一功能。下面我们将深入探讨这个知识点。 首先，我们来理解为什么要限制上传文件类型。当用户可以自由上传任何类型的文件时，可能会有人...
客户端JS验证fileupload控件，设置只允许特定的文件类型
weixin_33786077的博客
11-05 87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server...
客户端JS验证fileupload控件，设置只允许特定的文件类型。
weixin_34345560的博客
12-23 102
服务器端的验证的方法很容易写，我再给出个客户端JS验证的方法。两法并用更好，服务器端验证可以解决客户端禁用JS导致用户绕过验证的问题；客户端JS验证可以减少用户操作的步骤（在提交到服务器之前就已经告诉用户错误信息了），从而获得更好的用户体验。 下面的代码你可以修改成ajax的，当然，你得自己去写后台方法和发送和处理XMLHTTP请求。不过一般用下面的JS和上面各位的服务器验证就已经足够了。 ...
JavaScript上传文件
Rain022111的博客
06-07 371
【代码】JavaScript上传文件。
限制上传文件类型代码.rar
07-04
"限制上传文件类型代码"这个主题就是针对这一需求的解决方案。在JavaScript中，我们可以通过前端和后端两方面来实现这样的功能。 首先，前端限制主要涉及到HTML5的`<input type="file">`元素。在创建文件上传表单时...
javascript验证上传文件的类型限制必须为某些格式
12-12
代码如下: //验证文件的格式 function validateFile(){ var fileObject=$(“#filename”); var errorObject=$(“#error”); var filepath=fileObject.val(); var fileArr=filepath.split(“//”); var ...
JS控制FileUpload的上传文件类型实例代码
11-23
总的来说，通过编写JS代码并将其与HTML的`<input type="file">`或ASP.NET的`<asp:FileUpload>`控件配合，可以有效地限制用户上传的文件类型，提高应用程序的安全性和用户体验。需要注意的是，虽然此方法可以提供一定...
JavaScript检测上传文件大小的方法
01-19
本文实例讲述了JavaScript检测上传文件大小的方法。...通过JS客户端代码限制用户上传文件的大小，但是客户端的验证只是辅助的，服务器端一定还要再做验证 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN ...
js实现文件上传
04-09
很棒的js文件上传源代码，上传稳定还有进度提示，需要使用commons-fileupload和commons-io.可以直接嵌入项目里面使用。
js上传附件
08-31
js编写的上传附件，可限制上传图片数量，上传的图片大小
写个文件上传的javaScript代码
weixin_35754962的博客
01-12 81
以下是一个简单的文件上传 JavaScript 代码示例： // 创建一个文件选择器 var fileInput = document.createElement("input"); fileInput.type = "file"; // 监听文件选择事件 fileInput.addEventListener("change", function() { // 获取选择的文件 var f...
原生javascript实现文件上传功能代码
CodingNoob
10-30 800
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
前端js限制上传文件类型及大小（1）
热门推荐
透明大脑
06-24 1万+
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function fileChange(target,id) { var fileSize = 0; var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".do
js上传excel
weixin_45780818的博客
12-17 516
npm i xlsx // HTML <el-form-item> <el-upload class="upload-demo" action="" :on-change="handleChange" :show-file-list="false" :on-remove="handleRemove" accept="appli.
js上传文件、文件大小限制
06-21 4165
js上传文件，设置允许上传文件的大小
限制上传文件后缀的js方法
qingfengxia2013的专栏
12-21 762
function lastname(){ //获取欲上传的文件路径 var filepath = document.getElementById("file_name").value;  //为了避免转义反斜杠出问题，这里将对其进行转换 var re = /(\\+)/g;   var filename=filepath.replace(re,"#");  //对路径字符...
[课题设计]SSM框架开发个人通讯录+jsp+Java前后端分离带论文和源码.zip
最新发布
07-20
本项目是一个基于SSM框架开发的个人通讯录应用，采用JSP作为前端技术，实现了前后端分离。项目针对计算机相关专业的学生以及需要进行项目实战练习的Java学习者，提供了完整的源码、数据库脚本和开发说明，同时附带论文参考，可作为毕业设计或课程设计的优质资源。 在功能方面，该项目实现了基本的通讯录增删改查功能，用户可以通过前端界面录入、修改和查询联系人信息，后台则通过SSM框架进行数据处理和业务逻辑的实现。此外，项目还支持分页显示功能，提高了用户体验。 技术层面，项目采用了成熟的SSM框架进行开发，确保了代码的结构清晰、易于维护。数据库选用MySQL，稳定可靠，且易于扩展。开发环境包括JDK、IDEA和Tomcat，配置简单，便于上手。 经过严格的调试，项目已确保可稳定运行。对于有一定基础的Java学习者，还可以在此基础上进行功能拓展，进一步提升实战能力。
el-upload 限制上传文件类型 图片
07-29
对于el-upload组件，你可以使用before-upload钩子函数来限制上传文件的类型。在这个钩子函数中，你可以获取到上传的文件对象，并通过文件名后缀来判断文件类型。如果文件类型不符合要求，你可以给出相应的提示信息并阻止文件上传。 在给出的代码示例中，beforeUpload函数中的判断条件有一个错误。应该使用逻辑或运算符（||）而不是逻辑与运算符（&&）。因为一个文件的后缀名不可能同时是'.jpg'和'.txt'。所以正确的判断条件应该是： ```javascript if (fileExtName !== '.jpg' && fileExtName !== '.txt') { // 提醒只能上传的文件类型 warn('只能上传.jpg、.txt类型的文件！'); return; } ``` 这样，当上传的文件类型不是'.jpg'或'.txt'时，会给出相应的提示并阻止文件上传。 希望这个解答对你有帮助！ #### 引用[.reference_title] - *1* *2* [el-upload 限制上传数量、文件类型](https://blog.csdn.net/Daydreame_r/article/details/127320550)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v4^insert_chatgpt"}} ] [.reference_item] - *3* [el-upload限制文件大小(图片尺寸)](https://blog.csdn.net/ljw124213/article/details/124404779)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v4^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值