js 上传文件限制

最新推荐文章于 2023-09-19 11:21:34 发布
最新推荐文章于 2023-09-19 11:21:34 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： js初阶 文章标签： input file上传文件的限制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiuyan_f/article/details/79218312
版权 
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
			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", ".docx", ".xlsx"];
				var filepath = target.value;
				var filemaxsize = 1024 * 2; //2M 

				if(filepath) {
					var isnext = false;
					var fileend = filepath.substring(filepath.indexOf("."));
					if(filetypes && filetypes.length > 0) {
						for(var i = 0; i < filetypes.length; i++) {
							if(filetypes[i] == fileend) {
								isnext = true;
								break;
							}
						}
					}
					if(!isnext) {
						alert("不接受此文件类型！");
						target.value = "";
						return false;
					}
				} else {
					return false;
				}
				if(isIE && !target.files) {
					var filePath = target.value;
					var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
					if(!fileSystem.FileExists(filePath)) {
						alert("附件不存在，请重新输入！");
						return false;
					}
					var file = fileSystem.GetFile(filePath);
					fileSize = file.Size;
				} else {
					fileSize = target.files[0].size;
				}

				var size = fileSize / 1024;
				if(size > filemaxsize) {
					alert("附件大小不能大于" + filemaxsize / 1024 + "M！");
					target.value = "";
					return false;
				}
				if(size <= 0) {
					alert("附件大小不能为0M！");
					target.value = "";
					return false;
				}
			}
		</script>
	</head>

	<body>
		<input type="file" name="contractFileName" style="width: 500px;" οnchange="fileChange(this);" />
	</body>

</html>

秋秋喵
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js上传文件
subuser的专栏
08-01 3万+
一、原始的XMLHttpRequestjs上传文件过程(参考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象：FormData 第二个对象：XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，
js文件分块上传
aryasei的专栏
06-04 1058
用过浏览器的开发人员都对大文件上传与下载比较困扰，之前遇到了一个php文件夹上传下载的问题，无奈之下自己开发了一套文件上传控件，在这里分享一下。希望能对你有所帮助。 上传控件功能： 1.文件批量上传 此文件管理器支持文件批量上传。您可以上传30G及以上的大型文件，在上传过程中您不需要担心刷新网页造成的进度丢失问题。也不需要担心浏览器重启或崩溃，电脑重启等极端应用场景造成的进度丢失问题...
js实现文件上传
hly15555307663的博客
07-07 2万+
组件库用多了，那就来看看js原生
JavaScript对文件上传类型限制(根据文件头信息判断)
最新发布
富朝阳的博客
09-19 2075
在前端开发过程中，文件上传功能几乎必不可少的，很多时候，我们在进行文件上传时，尤其是向普通用户开放文件上传功能时，一般都需要对上传文件的格式进行一些限制，以防止不良用户、黑客等将带有病毒脚本文件上传到服务器中，常见文件格式限制如下。
前端-vue-文件上传（图片、word，ppt，pdf，excel，txt等文件流）
shuaishuaizhang8的博客
06-23 1万+
1. 文件上传（图片、word，ppt，pdf，excel，txt等文件流） 总结一下上传组件的思路 input标签的@change事件 通过input标签的@change事件的绑定，进行文件的选择上传，获取到文件const uploadFile = file.target.files[0]，然后通过文件流转为base64，然后可以在前端进行预览。 预览只有图片和PDF 预览的文件不多，只有img，和pdf的可以预览，这和浏览器可以打开的文件流有关，也就是说前端能做到的预览只有图片和PDF，像word、和
javascript文件上传.doc,.pdf,.docx等格式
weixin_41760500的博客
01-15 7317
               1、 由于input的type="file"的默认属性比较丑，所以我们要隐藏input标签，这里用的是定位。                2、通过class="enclosure-text"这个P标签来存放我们所上传后的文件名                3、由于input是隐藏的，所以我们要加一个上传按钮，并添加点击事件去触发input的点击事件 HTML...
前端js实现在线预览pdf、word、xls、ppt等文件
热门推荐
逆水行舟，不进则退
06-05 4万+
昨天遇到一个需求，公司的视频项目都是视频类型，如果是文件类型就直接打开预览，或者下载查看 项目把请求的资源都作为视频资源处理，直接赋值给 video 标签解析。所以我新增了一个功能函数，方法很简单 文件预览原理： 通过 a 标签直接访问，如果是浏览器支持的文件，可以直接打开预览 加上 h5 的 download 属性可以实现下载，而不预览。经本人测试，该属性在移动端没效果 前端 ifr...
javascript实现限制上传文件大小
10-24
本文将详细讲解如何使用JavaScript实现限制上传文件大小。 首先，我们需要了解JavaScript获取文件大小的基本方法。在现代浏览器中，`<input type="file">`元素的`files`属性可以返回一个`FileList`对象，其中包含了...
限制ckeditor上传图片文件大小的方法
10-26
在使用CKEditor这样的富文本编辑器时，有时我们需要对用户上传的图片文件大小进行限制，以防止服务器存储空间被大量占用或服务器性能受到影响。本文主要介绍两种方法来限制CKEditor（此处指旧版本的Fckeditor）上传...
JS上传文件
08-31
8. **文件限制**：你可以通过配置参数限制上传文件的类型、大小，例如`fileTypeExts`用于指定允许上传的文件扩展名，`fileSizeLimit`则用来设定单个文件的最大大小。 9. **回调函数**：Uploadify提供了一些回调函数...
【JavaScript源代码】JavaScript 上传文件限制参数案例详解.docx
12-28
JavaScript 上传文件限制参数案例详解 　项目场景：　1，上传文件限制　功能作用：　1，防止前端操作上传异常文件 2，限制符合的规则，优化展示模型　功能实现：　1，获取file实例 2，执行校验规则方法　代码如下：...
JAVASCRIPT 上传文件的几种方式
Anne_01的博客
02-24 1万+
方法1：使用ajax，通过formdata传参 //注意：FormData只兼容到IE10 var formData = new FormData(); var file = $('.import-file-btn').get(0).files[0]; formData.append('file', file); formData.append('id', id); formData.append('name', name); $.ajax({ url: 'user/validate_impo
JS控制上传文件个数
aclthxv92491的博客
04-23 979
<html><body> <h3>js控制文件上传数量</h3> <form action="" enctype="multipart/form-data"> <input type="file" name="file" multiple="multiple" onchange="fileCoun...
js上传文件、文件大小限制
06-21 4148
js上传文件，设置允许上传文件的大小
js 前端验证文件上传格式，限制上传文件大小（兼容各种浏览器）
stwood007的博客
12-14 6408
js 前端验证文件上传格式，js 前端验证上传文件大小，兼容各种浏览器
【原生js】前端文件上传解决方案总结
weixin_43655896的博客
04-18 9076
文件上传缩略图，上传进度条，文件断点续传等
js控制文件上传
qq_46220649的博客
04-22 292
js控制文件上传数量
前端js限制上传文件类型及大小（1）
11-09 158
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <scripttype="text/javascript"> varisIE=/msie/i.test(navigator.use...
js上传文件（图片）限制格式及大小为3M · 观止
透明大脑
05-30 3万+
如果你想快速解决这个问题，看本文就够了。查了好多资料，终于解决了，太耗时间了，本文留给给后来者，希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能       function check()     { var aa=document.getElementById("userfile").value.toLowerCase().
js上传限制文件大小
05-26
要限制文件上传的大小，需要在前端和后端都进行设置。 在前端，可以通过文件选择框的accept和multiple属性来限制文件类型和数量，以及通过文件对象的size属性来限制文件大小。例如： ```html <input type="file" accept=".jpg,.png" multiple="multiple" onchange="checkFileSize(this)"> ``` ```javascript function checkFileSize(input) { const files = input.files; const maxSize = 1024 * 1024; // 1MB for (let i = 0; i < files.length; i++) { if (files[i].size > maxSize) { alert('文件大小不能超过1MB！'); input.value = ''; // 清空文件选择框 return; } } } ``` 在后端，需要在服务器端设置上传文件大小的限制。具体方法因不同的后端语言和框架而异。以 Node.js 和 Express 框架为例，可以使用 multer 中间件来处理文件上传，并设置文件大小限制。例如： ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ limits: { fileSize: 1024 * 1024 } // 1MB }); app.post('/upload', upload.single('file'), (req, res) => { // 处理上传文件的业务逻辑 }); ``` 以上代码中，通过 limits 属性设置了文件大小限制为1MB。使用 upload.single('file') 中间件可以处理单个文件上传，'file' 是文件上传表单项的 name 属性值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值