js 上传文件校验附件类型和限制上传类型

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量588 收藏
点赞数
分类专栏： 前端静态页面以及逻辑 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieweiwujie/article/details/130962905
版权

新建一个js文件file.js

/**
 * Created by xiewei on 30/05/2023
 */
const imgData = [
  //EXCEL1
  {
    type: ['xls', 'XLS', 'xlsx', 'XLSX'],
    imgSrc: require("@/assets/images/fileIcon/x.png")
  },
  //WORD2
  {
    type: ['doc', 'DOC', 'docx', 'DOCX'],
    imgSrc: require("@/assets/images/fileIcon/word.png")
  },
  //PDF3
  {
    type: ['PDF', 'pdf'],
    imgSrc: require("@/assets/images/fileIcon/pdf.png")
  },
  //zip4
  {
    type: ['txt', 'TXT'],
    imgSrc: require("@/assets/images/fileIcon/txt.png")
  },
  //rar5
  {
    type: ['rar', 'RAR'],
    imgSrc: require("@/assets/images/fileIcon/rar.png")
  },
  //PDt6
  {
    type: ['ppt', 'pptx', 'PPT', 'PPTX'],
    imgSrc: require("@/assets/images/fileIcon/ppt.png")
  },
  //PDF7
  {
    type
了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端小云儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
js 上传文件校验文件类型和大小
04-27
js 上传图片 校验 文件类型 大小js 上传图片 校验 文件类型 大小js 上传图片 校验 文件类型 大小 js 上传文件校验 js 上传文件校验 js 上传文件校验
html 文件上传校验,js校验上传文件的格式
weixin_36258014的博客
06-07 276
String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>My JSP 'index.jsp' starting pagefunction validateFi...
解决在eggjs下只有xls、xlsx的文件类型无法上传
weixin_38989540的博客
10-12 783
今天突然碰到在eggjs下很奇怪的问题，就是只有xls、xlsx的文件类型无法上传，上传请求一直卡着，其他doc、img、txt、zip都可以正常上传。上传的配置文件如下： config.multipart = { mode: 'file', fields: 20, fileSize: '100mb', /** 注意：独家自创，这个配置可以允许任何文件后缀上传 */ whitelist() { return true; }, }; 之前服务
JS简单验证上传文件类型的方法
12-03
本文实例讲述了JS简单验证上传文件类型的方法。分享给大家供大家参考，具体如下： function checkType(){ //得到上传文件的值 var fileName=document.getElementById("file_logo").value; //返回String对象中子字符串最后出现的位置. var seat=fileName.lastIndexOf("."); //返回位于String对象中指定位置的子字符串并转换为小写. var extension=fileName.substring(seat).toLowerCase(); //判断允许上传的文件格式
用JS如何实现判断上传文件是否符合格式要求？
qq_45473786的博客
03-14 3003
文章目录案例描述基础知识效果展示页面加载完毕上传一张图片上传的不是一张图片HTML 代码JS实现代码 案例描述 在浏览器中上传一个文件，判断该文件是否为符合要求的图片（jpg png gif），如果上传的十一张符合要求的图片，浏览器弹出“是一张图片”的警告。若不是，则弹出’请传入一张图片’的警告 基础知识 用到JS中的onchange监听用户上传的文件类型 效果展示 页面加载完毕 上传一张图片 ...
JavaScript对文件上传类型限制(根据文件头信息判断)
富朝阳的博客
09-19 2072
在前端开发过程中，文件上传功能几乎必不可少的，很多时候，我们在进行文件上传时，尤其是向普通用户开放文件上传功能时，一般都需要对上传文件的格式进行一些限制，以防止不良用户、黑客等将带有病毒脚本文件上传到服务器中，常见文件格式限制如下。
JavaScript实现拖拽上传 解析 APK 信息
独行侠梦的博客
02-22 641
点击上方蓝字，关注我们技术栈jquery文件上传：jquery.fileupload，github 文档apk 文件解析：app-info-parser，github 文档参考：前端解析i...
javascript实现限制上传文件大小
10-24
本文将详细讲解如何使用JavaScript实现限制上传文件大小。 首先，我们需要了解JavaScript获取文件大小的基本方法。在现代浏览器中，`<input type="file">`元素的`files`属性可以返回一个`FileList`对象，其中包含了...
java 大文件（视频）分片上传+压缩
10-26
- **WebUploader**：这是一款基于JavaScript的前端文件上传组件，它支持多文件选择、断点续传、文件预览等功能。WebUploader通过将大文件切割成小块（分片），逐个上传，以解决浏览器对单个文件上传大小限制的问题...
基于Java EE的文件批量上传的设计与实现
05-28
4. **文件验证**：为了确保上传安全，需要对文件类型、大小进行限制。例如，只允许特定格式的文件上传，如图片、文档等；同时，设置最大上传文件大小防止DoS攻击。 5. **错误处理与反馈**：良好的用户体验需要在...
java_sturts多附件上传
11-21
在实际开发中，还可能涉及安全性、性能优化等方面的问题，例如限制并发上传数量、使用异步上传提高性能、使用CDN加速文件访问等。理解并熟练掌握这些知识点，能够帮助你有效地实现Struts2框架下的多附件上传功能。
springboot+layui文件上传demo
04-04
同时，我们需要配置layui的JS事件监听，处理文件选择和提交： ```javascript layui.use(['form'], function () { var form = layui.form; form.on('submit(submit)', function (data) { var file = data.field....
JS判断时间上传格式
Giraffe0615的博客
07-04 83
【代码】JS判断时间上传格式。
js 校验上传文件的类型是否是Excel
weixin_34061042的博客
04-09 4248
校验上传表格的文件类型是否符合 export const che...
javascript 上传的Excel格式校验
weixin_34226706的博客
09-29 1621
校验上传的表格文件类型是否符合指定的文件类型，（文件类型自动添加）...
js 前端验证文件上传格式，限制上传文件大小（兼容各种浏览器）
stwood007的博客
12-14 6406
js 前端验证文件上传格式，js 前端验证上传文件大小，兼容各种浏览器
js 文件上传判断文件类型
小小阳
12-24 2142
function getFileType(fileName) { // 根据后缀判断文件类型 let fileSuffix = ""; // 结果 let result = ""; try { let flieArr = fileName.split("."); fileSuffix = flieArr[flieArr.length - 1]; } cat...
vue项目实现前端预览word和pdf格式文件
qq_37635012的博客
12-13 6351
最近做vue项目遇到一个需求，就是前端实现上传word或pdf文件后，后端返回文件对应的文件流，前端需要在页面上展示出来。
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 121
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue上传文件类型校验怎么写
08-13
### 回答1： 在Vue中，可以使用HTML5中的`<input type="file">`元素来实现文件上传功能。而要校验上传文件的类型，可以在`<input>`元素中添加`accept`属性，来指定可以上传的文件类型。 例如，如果要上传图片文件，可以将`accept`属性设置为`"image/*"`，表示只能上传图片文件。如果要上传PDF文件，可以将`accept`属性设置为`"application/pdf"`。 示例代码如下： ``` <template> <div> <input type="file" @change="handleFileUpload" accept="image/*"> </div> </template> <script> export default { methods: { handleFileUpload(event) { const uploadedFile = event.target.files[0]; // 校验文件类型 if (uploadedFile.type.includes('image/')) { // 上传图片 } else { // 文件类型不符合要求，提示用户 alert('请上传图片文件'); } } } } </script> ``` 在上述示例代码中，`accept`属性被设置为`"image/*"`，表示只能上传图片文件。在`handleFileUpload`方法中，可以通过`uploadedFile.type`属性来获取上传文件的类型，然后根据需要进行校验或处理。 ### 回答2： 在Vue中，我们可以通过使用HTML的`<input type="file">`元素来实现文件上传功能。要对上传文件的类型进行校验，可以通过以下步骤来实现： 1. 在Vue组件模板中，添加一个文件选择输入框： ```html <input type="file" @change="handleFileUpload"> ``` 2. 在Vue组件的`methods`中，定义一个`handleFileUpload`方法来处理文件上传事件： ```javascript methods: { handleFileUpload(event) { const file = event.target.files[0]; // 获取上传的文件 const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg']; // 允许上传的文件类型 if (allowedTypes.includes(file.type)) { // 检查文件类型是否在允许的类型列表中 // 处理文件上传逻辑 } else { alert('只允许上传PNG、JPEG、JPG类型的文件!'); // 文件类型不符合要求，弹出警告框 } } } ``` 在上述代码中，我们首先通过`event.target.files[0]`来获取到上传的文件对象。然后，我们定义了一个允许上传的文件类型数组`allowedTypes`，其中包含了我们允许上传的文件类型。接下来，我们使用`includes`方法来检查该文件的类型是否在允许的类型列表内。如果文件类型符合要求，则可以执行后续的文件上传逻辑；如果文件类型不符合要求，则会弹出一个警告框提示用户。 以上就是在Vue中对文件类型进行校验的简单实现方法。根据实际需求，你可以根据自己的情况进行更多的扩展和错误处理。 ### 回答3： 在Vue中上传文件类型校验可以通过以下步骤实现： 1. 首先，在Vue组件中引入文件上传组件，并设置需要进行文件类型校验的input元素，例如： ```html <template> <div> <input type="file" ref="fileInput" @change="uploadFile" accept=".jpg,.png" /> </div> </template> ``` 在上述代码中，我设置了文件输入框的accept属性为".jpg,.png"，表示只允许选择jpg和png类型的文件。 2. 接下来，在Vue组件的methods中，编写上传文件的方法，例如： ```javascript methods: { uploadFile() { const file = this.$refs.fileInput.files[0]; if (file) { const fileName = file.name; const fileType = file.type; // 判断文件类型是否合法 if (fileType === 'image/jpeg' || fileType === 'image/png') { // 执行文件上传操作 // ... } else { alert('只允许上传jpg和png类型的文件'); } } } } ``` 在上述代码中，我首先获取选择的文件对象，并通过file.type属性获取文件类型。然后，我使用条件判断语句检查文件类型是否为允许的类型。如果文件类型合法，可以执行上传操作；否则，弹出提示框提醒用户只允许上传jpg和png类型的文件。 注意：为了更好地提醒用户只允许上传指定的文件类型，可以在前端通过accept属性限制可选择的文件类型。同时，后端也需要进行文件类型校验，以确保安全和完整性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值