zoukankan      html  css  js  c++  java
  • HTML5 文件上传

    这篇随笔主要引用https://juejin.im/post/59598ecf5188250d8d141fff,只用于自己学习,不对外宣传。

    FileList 对象和 file 对象

    input[type="file"]标签有一个multipe属性,允许用户选择多个文件,FileList对象就是表示用户选择的文件列表。这个列表中的每一个文件就是一个file对象。

    file对象属性:

    • name:文件名,不包含路径
    • type:文件类型。图片类型的文件都会以image/开头,可以由此来限制只允许上传图片
    • size:文件大小
    • lastModified:文件最后修改时间
    <input type="file" id="files" multipe>
    <script>
        var elem = document.getElementById('files');
        elem.onchange = function (event){
            var files = event.target.files;
            for(var i = 0;i<files.length;i++){
                if(files[i].type.indexof('image/')!==-1&&files[i].size<204800){
                console.log(files[i].name);
            }    
        }
    }

    input 中有个 accept 属性,可以用来规定能够通过文件上传进行提交的文件类型。

    <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">

    FileReader 对象

    FileReader对象主要用来把文件读入内存,并且读取文件中的数据。通过构造函数创建一个FileReader对象

    var reader = new FileReader();

    该对象有以下方法:

    • abort:中断读取操作
    • readAsArrayBuffer:读取文件内容到ArrayBuffer对象中
    • readAsBinaryString:将文件读取为二进制数据
    • readAsDataURL:将文件读取为data:URL格式的字符串
    • readAsText:将文件读取为文本
    <input type="file" id="files" accept="image/jpeg,image/jpg,image/png">
    <img src="blank.gif" id="preview">
    <script>    
        var elem = document.getElementById('files'),
            img = document.getElementById('preview');
           elem.onchange = function(){
             var files = elem.files,
               reader = new FileReader();
             if(files && files[0]){
              reader.onload = function(ev){
               img.src = ev.target.result;
               }
            reader.readAsDataURL(files[0])
          }
        }
    </script>
  • 相关阅读:
    六.php小项目(2)过桥问题
    六.php小项目(1)九九乘法表
    五.php语言结构(3)break continue
    五.php语言结构(2)循环结构
    五.php语言结构(1)顺序和控制结构
    四.php运算符(6)字符串运算符和赋值运算符
    四.php运算符(5)递增递减运算符
    Day13 Java基础学习笔记
    Day12Java基础学习笔记
    Day 11Java基础学习笔记
  • 原文地址:https://www.cnblogs.com/zgx123/p/7447102.html
Copyright © 2011-2022 走看看