input详解之文件上传

这篇具有很好参考价值的文章主要介绍了input详解之文件上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

input 全部类型

常用的并且能为大多数浏览器所识别的类型大概有:text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。

1、一般类型
<!-- text类型 文本框  默认text文本框 -->
<input type="text"></input>

<!-- password类型 密码框 -->
<input type="password"></input>

<!-- number类型 数字框 -->
<input type="number"></input>

<!-- button类型 按钮 -->
<input type="button"></input>

<!-- reset类型 重置按钮  一般用于form表单中 -->
<input type="reset"></input>

<!-- submit类型 提交按钮  一般用于form表单中 -->
<input type="submit"></input>

<!-- hidden类型 隐藏  会将input隐藏,所以什么都看不到,而且被隐藏的input框也不会占用空间 -->
<input type="hidden"></input>

<!-- radio类型 单选按钮 -->
<input type="radio"></input>

<!-- checkbox类型 复选按钮 -->
<input type="checkbox"></input>

<!-- image类型 图片 -->
<input type="image" src="../../image/one.png"></input>

<!-- color类型 颜色 -->
<input type="color"></input>

<!-- range类型 滑动条 -->
<input type="range"></input>

<!-- date类型 日期 -->
<input type="date"></input>

<!-- month类型 月份 -->
<input type="month"></input>

<!-- week类型 周 -->
<input type="date"></input>

<!-- time类型 时间 -->
<input type="time"></input>

<!-- datetime类型 时间、日、月、年(UTC时间) 火狐、360浏览器都对datetime不支持,会按照text类型处理。 -->
<input type="datetime"></input>

<!-- datetime-local类型 时间、日、月、年(本地时间) -->
<input type="datetime-local"></input>

<!-- tel类型 电话  我认为没有实际用处 -->
<input type="tel"></input>

<!-- email类型 邮箱 火狐对email类型有校验,360浏览器无校验 -->
<input type="email"></input>

<!-- file 类型 文件 -->
<input type="file"></input>
2、file 类型 文件
<input type="file" accept multiple></input>
2.1、属性
accept属性
  • accept=“image/png” 或 accept=“.png” ——只接受 png 图片.
  • accept=“image/png, image/jpeg” 或 accept=“.png, .jpg, .jpeg” ——PNG/JPEG 文件.
  • accept=“image/*” ——接受任何图片文件类型.
  • accept=“audio/*” —— 接受任何音频文件类型.
  • accept=“video/*” —— 接受任何音频视频文件类型.
  • accept=“.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document” —— 接受任何 MS Doc 文件类型.
multiple属性

代表是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。

<input id="fileId2" type="file" multiple="multiple" name="file" />
2.2、事件监听

在 change 事件监听的函数内,event.target.files 就是用户上传的图片信息。

<input style="display: none" 
	id="file" ref="files" 
	type="file" 
	@change="uploadData(e)" 
	accept=".doc,.docx,.pdf,.ai,.psd" 
	multiple="multiple" />
 // 获取文件 这里是使用的 vue3.0 语法 
        const uploadData = (e) => {
            let e = window.event || e  // change事件获取到的数据
            if (e.target.files[0].size > 500 * 1024 * 1024) { // 限制文件上传大小
                ElMessage.error('上传单个文件大小不能超过 500M!')
            } else {
                state.ruleForm.documentFile = e.target.files[0]  // 文件赋值
            }
        }
2.3、css样式更改

第一种:vue3.0的写法 把 input file 样式设置display:none; 隐藏, 或者 设置透明度 opacity设置为0,然后用一个好看的按钮代替点击,之后,在input中设置ref 用来获取数据。 js中获取ref然后链接设置样式的点击事件

<el-button  @click="goFile" size="small" type="primary">
      <i class="el-icon-upload2"></i>上传文件
</el-button>
<input style="display: none" 
	id="file" ref="files" 
	type="file" 
	@change="uploadData(e)" 
	accept=".doc,.docx,.pdf,.ai,.psd" 
	multiple="multiple" />
// 先在vue 中获取 ref
import {  toRefs,ref } from 'vue'

export default {
    name: 'FileData',
    components: {},
    setup () {
        const state = reactive({
         loading: false,
            pageInfo: {
                page: 1,
                rows: 10,
                total: 0,
            }
         })
        const files = ref(null) // 获取ref 这里对接html的ref
        // 这里对接html 代码 的点击事件
        const goFile = () => {
            files.value.click()
        }
        // 最后return 出去
        return {
            ...toRefs(state),
            goFile,
            files,
        }

效果:

input详解之文件上传

第二种方法:vue2.0 写法,vue2.0很多种写法,我举例一种:使用 label元素 与 input file控件关联,然后隐藏 input。也是一样的。只不过不用调用方法了。

 <input style="display: none" 
 	id="fileImg" ref="filesImg" type="file" 
 	@change="uploadImg(e)" 
	accept=".jpg,.png,.gif,.bmp" 
	multiple="multiple" />
  // 获取图片
        const uploadImg = (e) => {
            let e = window.event || e // change事件获取到的数据
            if (e.target.files[0].size > 2 * 1024 * 1024) { // 限制上传图片文件大小
                ElMessage.error('上传单个封面大小不能超过 2M!')
            } else {
                state.ruleForm.coverFile = e.target.files[0] 
                // 获取图片地址
                let file = e.target.files[0]
                let reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = function (result) {
                    state.coverFile = result.target.result // 图片地址 Base64 格式的 可预览
                }
            }
        }
2.3、上传文件之后清空内容

获取到的files文件的value 赋值为空,但是这种方式不能彻底清理文件达到解决问题的方法,最后,外部加一个form表单,然后清空form表单里面的内容文章来源地址https://www.toymoban.com/news/detail-407544.html

<form id="dataForm">
       <input style="display: none" 
        id="file"
        ref="files"
        type="file" 
        @change="uploadData(e)" 
        accept=".jpg,.docx,.pdf,.ai,.psd,.png,.gif,.bmp" 
        multiple="multiple" />
    </form>
document.getElementById('DataForm')&&document.getElementById('DataForm').reset();
2.4、各种文件的类型
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

到了这里,关于input详解之文件上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js触发input的打开文件选择器,将本地图片回显以及上传

    你可以通过以下 JavaScript 代码触发文件选择器:这里的场景不是通过 input 标签来触达的文件选择器, 这样对于 样式较为复杂 的上传可以在html结构上保持清爽愉快, 不用多添加一个input标签。 示例demo,理解思路 这里的file,可以将一切媒体的类型的文件可以上传,但是有些

    2024年01月23日
    浏览(48)
  • CSS ::file-selector-button伪元素修改input上传文件按钮的样式

    默认样式 修改后的样式

    2024年02月16日
    浏览(39)
  • 文件上传-绕过文件类型

            小伙伴们大家好!本期为大家带来的文件上传漏洞之绕过文件类型。 目录 原理 Content-Type PHP代码如何获取上传文件的类型 实战演示 1、测试网站的功能是否正常 2、尝试上传webshell 3、使用连接工具连接webshell  总结         当我们上传文件的时候,不仅前端要检

    2024年02月11日
    浏览(40)
  • Linux系统struct input_event结构体分类型(鼠标、键盘、触屏)详解与例子

    目录 一、概述 二、结构体字段解析 三、不同类型地解释字段  3.1 鼠标事件  3.2 键盘事件  3.3 触摸屏事件 四、使用 struct input_event 读取设备文件的例子 Linux系统是通过 输入子系统 来管理输入设备(如鼠标、键盘、触摸屏、游戏摇杆)的。配置了内核支持且安装对应驱动

    2024年02月16日
    浏览(42)
  • wordpress自定义上传文件类型的方法

    前言 众所周知WordPress默认支持大部分图片等文件格式的上传,但也有一些文件格式是不支持的,根据个人需要,我们需要增加一些格式,一些格式也可以禁止上传,设置非常非常简单,下面来一起看看吧。 方法如下 直接把以下代码复制到你的主题的functions.php文件中,如果没

    2023年04月25日
    浏览(57)
  • 文件上传常用绕过方式

    JavaScript 验证就是所谓的客户端验证,也是最脆弱的一种验证。直接修改数据包或禁用 JavaScript.enable 即可绕过。 例如upload的第一题,在我们点击发送时,还没经过代理就直接弹窗报错,就考虑存在前端验证 我们只需要将前端验证的布尔值改为false,重新加载后就能绕过前端验

    2024年02月13日
    浏览(29)
  • 前端文件上传识别文件类型的几种方法,快看你是哪个?

    在我们的日常开发过程中,我们会经常接触到一些文件上传的事情,其中在前端这边识别识别文件类型的是非常常见的功能,例如来限制文件上传的类型,接下来我们来了解一下最常见的几种方式。 最简单快捷的方法就是 hiyaJavaScript 获取文件名的扩展名,对比扩展名来判断

    2024年02月20日
    浏览(46)
  • 详解MySQL的常用数据类型

    MySQL支持很多数据类型,以便我们能在复杂的业务场景中支持各种各样的数据格式,存储适当的数据内容。我们在设计数据库时,正确的使用数据库类型对整个数据库的整洁和高效,会有很大的帮助。 MySQL 支持多种类型,大致可以分为三类:数值、日期/时间和字符串(字符)

    2024年02月12日
    浏览(38)
  • uni-app之app上传pdf类型文件

    通过阅读官方文档发现, uni.chooseFile 在app端不支持非媒体文件上传; 可以使用这个插件,验证过可以上传pdf;具体使用可以去看文档 插件地址 就是还是会出现相机,这个可能需要自己解决下 实现功能:上传只能上传一个,如果文件列表有值点击上传进行toast提示,不再出现

    2024年02月13日
    浏览(54)
  • elasticsearch 常用数据类型详解和范例

    elasticsearch 中的字符串(keyword)类型 的详解和范例 elasticsearch 中的字符串/文本(text)类型 的详解和范例 elasticsearch 中的数字(数值)类型 的详解和范例 elasticsearch 中的布尔(boolean)类型 的详解和范例 elasticsearch 中的日期(date)类型 的详解和范例 elasticsearch 中的地理(

    2024年02月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包