zoukankan      html  css  js  c++  java
  • input type="file" 上传文件的一些使用

    web可以使用Input type="file"来上传图片或者文件

    <input name="myFile" type="file">

    对应事件:change

    常用属性:accept, multiple, capture

    accept:限制文件类型

    audio/* 表示所有音频文件 HTML5(支持)

    video/* 表示视频文件 HTML5(支持)

    image/* 表示图片文件 HTML5(支持)

    支持逗号分隔的 MIME 类型字符串,写可以写成如下的方式:

    accept="image/png" 或者 accept=".png" ,只接受 png 图片。

    accept="image/png, image/jpeg" 或者 accept=".png, .jpg, .jpeg" ,接受 PNG 和 JPEG 文件。

    accept="image/*" ,接受任何图片文件类型。

    multiple(多选):

    multiple 属性:当用户所在的平台允许使用 Shift 或者 Contro键时,用户可以选择多个文件。

    如果不希望多选,可以直接忽略 multiple 属性。

    capture(调用设备媒体):

    capture 属性:在webapp上使用 input 的 file 属性,指定 capture 属性可以调用系统默认相机、摄像和录音功能。

    capture表示,可以捕获到系统默认设备的媒体信息,如下:

    capture="camera" 相机

    capture="camcorder" 摄像机

    capture="microphone" 录音

    还可以设置capture="user"相机前置摄像头

    具体使用实例:

    /*html部分*/
    <input type="file" @change="toBase64($event)" class="upload_img">
    
    /*js部分*/
    toBase64(e){
                let _this = this;
                let files = e.target.files[0];
                let reader = new FileReader();
                reader.readAsDataURL(files);
                reader.onload = function() {
                    let imgcode = this.result.replace(/^data:image/(jpeg|png|gif|jpg|bmp);base64,/, '');
                    //其他操作
                };
                //清空数据
                e.target.value = '';
            }
                   
  • 相关阅读:
    JS实现继承的几种方式
    网站与域名知识扫盲-符号标签大全
    网站与域名知识扫盲
    第八届蓝桥杯决赛 发现环
    1014. Waiting in Line (模拟)
    第八届蓝桥杯决赛 对局匹配
    nvm安装nodejs(安装在非系统盘内)
    jquery datatable 获取当前分页的数据
    高德地图--轨迹回放(一)
    html5shiv.js和respond.js引入不起作用解决
  • 原文地址:https://www.cnblogs.com/chao202426/p/11698572.html
Copyright © 2011-2022 走看看