zoukankan      html  css  js  c++  java
  • Input标签文件上传,使用详解

    1、html添加标签按钮

    <button ion-button (click)="selectVideo()">添加</button>
    <input id="uploadPic" type="file"  (change)="handleVideo($event)"/>

    解释:button作用,用来美化input上传n按钮。同时设置Input 标签 display:none;隐藏input。

    2、触发uInput 标签的文件上传事件

    public selectVideo(){
        document.getElementById('uploadPic').click();
    }
    public handleVideo(e:any){
      let url = e.target.value;
    }

    解释:其中,方法selectVideo用于触发Input被点击,用于选择文件。handleVideo方法在选择的文件改变后触发,其中$event包含已选择文件的所有文件信息。

    3、$event文件对象常用属性、方法解析:

    (1)单文件上传文件信息

    Event{
        target:{
            baseURI:"http://localhost:8100/#/addCourse/t/course",
            files:[
            {
                name:"wps-office_10.1.0.5707_a21_amd64.deb",
                size:88085156,
                type:"application/vnd.debian.binary-package"
            }],
            value:"C:fakepathwps-office_10.1.0.5707_a21_amd64.deb"
        }
    }                

    (2)多文件上传文件信息

    Event{
        target:{
            baseURI:"http://localhost:8100/#/addCourse/t/course",
            files:[
            {
                name:"wps-office_10.1.0.5707_a21_amd64.deb",
                size:88085156,
                type:"application/vnd.debian.binary-package"
            }, {
                name:"wpasssss.deb",
                size:3333333,
                type:"application/vnd.debian.binary-package"
            }],
            value:"C:fakepathwps-office_10.1.0.5707_a21_amd64.deb"
        }
    }  

    解释:浏览器url:event.target.baseURI;

       文件名称:event.target.files[0].name;

       文件大小:event.target.files[0[.size;

       文件类型:event.target.files[0].type;

       文件路径:event.target.value;

    注:对于带有multiple属性的多文件上传,event.target.files会变成包含多个文件信息的数组。

    4、一般文件上传有三中方法:

    (1)filen对象格式传递给后台。

    (2)formdata文件格式n上传给后台。

    (3)对于图片上传,也可以传递base64URln编码格式传递给后台。

    具体使用哪种方法依据具体n情况而定。

    
    
  • 相关阅读:
    68
    56
    Django manager 命令笔记
    Django 执行 manage 命令方式
    Django 连接 Mysql (8.0.16) 失败
    Python django 安装 mysqlclient 失败
    H.264 SODB RBSP EBSP的区别
    FFmpeg—— Bitstream Filters 作用
    MySQL 远程连接问题 (Windows Server)
    MySQL 笔记
  • 原文地址:https://www.cnblogs.com/hsl-shiliang/p/9049964.html
Copyright © 2011-2022 走看看