<input type=file>文件上传

<input type=file>文件上传<input>type类型为file时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 JavaScript 的FileAPI对文件

大家好,又见面了,我是你们的朋友全栈君。

<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 JavaScript 的 File API 对文件进行操作 .

 

常用input属性:

accept:指示file类型,没有时表示不限制类型,填入格式后选择文件时只能看见被允许的文件

accept=”image/png” 或 accept=”.png” 表示只接受 png 图片. 

accept=”image/png, image/jpeg” 或 accept=”.png, .jpg, .jpeg” 表示接受 PNG/JPEG 文件. 

accept=”image/*” 接受任何图片文件类型. audio/* 表示音频文件video/* 表示视频文件

accept=”.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document” 接受任何 MS Doc 文件类型.

accept 属性并不会验证选中文件的类型. 他只是为开发者提供了一种引导用户做出期望行为的方式而已, 用户还是有办法绕过浏览器的限制。因此, 在服务器端进行文件类型验证是必不可少的。

multiple:Boolean ,指示用户能否多个输入,type为email或file时生效

required:指定用户在提交表单之前必须保证该元素值不为空。当 type 属性是 hidden,image 或者按钮类型(submit,reset,button)时不可使用。

:optional 和 :required css 伪元素的样式将可以被该字段应用作外观。

 

事件:

change事件

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

示例

<template> <div> <input type="file" id="upload" multiple @change="upload"></input> </div> </template> <script> export default { methods: { upload(e) { // 获取文件信息 // 返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表(你也可以像列表一样操作它). // 每个 File 对象包含了下列信息: // name: 文件名.    // lastModified: UNIX timestamp 形式的最后修改时间.    // lastModifiedDate: Date 形式的最后修改时间.    // size: 文件的字节大小.    // type: 文件类型. // let files=document.getElementById(‘upload‘).files // 获取单个文件信息 let file = e.target.files[0] // 文件信息获取后根据file.type判断类型,根据file.size限制判断大小,最后上传,建议上传单独一个写button const formdata = new FormData() formdata.append(‘file‘, file) // 调接口,data为formdata } } }; </script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154463.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • moya + RxSwift 进行网络请求

    moya + RxSwift 进行网络请求1.关于moya如在OC中使用AFNetworking一般,Swift我们用Alamofire来做网络库.而Moya在Alamofire的基础上又封装了一层:官方说moya有以下特性(我也就信了):编译时检查正确的API端点访问.使你定义不同端点枚举值对应相应的用途更加明晰.提高测试地位从而使单元测试更加容易.2.开始1.创建枚举API就像这样:enumAPIManager{c

    2022年10月29日
  • gbdt算法理解_gbdt算法原理

    gbdt算法理解_gbdt算法原理      谈及gbdt算法,不得不提GB与dt算法,即使用梯度提升回归树的方式进行回归提升。     以下贴上经典算法图:    1、第一步,算法中的参数,建立M棵回归树,每颗树的深度都为J,其中有一棵树为第一次建立的回归树,其余M-1棵树为残差(在梯度提升回归树里面为使损失函数最小的梯度向量)建立的树,F(X)为估值向量,即每一例为x样本在K类上的估值。   …

    2022年10月10日
  • HashMap底层实现原理_hadoop原理

    HashMap底层实现原理_hadoop原理Note:文章的内容基于JDK1.7进行分析,1.8做的改动文章末尾进行讲解。大家可以看一下:https://www.imooc.com/article/267756一、先来熟悉一下我们常用的HashMap1、概述HashMap基于Map接口实现,元素以键值对的方式存储,并且允许使用null建和null 值, 因为key不允许重复,因此只能有一个键为null,另外HashMap不…

  • 【UVA】1449-Dominating Patterns(AC自己主动机)

    【UVA】1449-Dominating Patterns(AC自己主动机)

  • c++界面开发工具_visual c++界面设计教程

    c++界面开发工具_visual c++界面设计教程亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv30.2正式发布!此版本包含新的Office2019样式可视化主题、改进了Shell控件以及其他一些新功能和改进!本文将为大家介绍v30.2中发布的新功能!让您对BCG最新发布的版本有一个全新的认识和了解。需要最新版的可以点击这里【BCG下载】…

  • leetcode 三数之和_leetcode数组交集

    leetcode 三数之和_leetcode数组交集原题链接给你一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?请你找出所有和为 0 且不重复的三元组。注意:答案中不可以包含重复的三元组。示例 1:输入:nums = [-1,0,1,2,-1,-4]输出:[[-1,-1,2],[-1,0,1]]示例 2:输入:nums = []输出:[]示例 3:输入:nums = [0]输出:[] 提示:0 <= nums.length <= 300

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号