Blog、File、FileReader 三者关系




说说我对 Blob File FileReader 三者关系的理解:

  1. 要从 Blob 对象中读取内容的唯一方法是使用 FileReader 对象。
  2. File 对象继承了 Blob ,所以也可以被 FileReader 所读取。
  3. URL.createOBJURL 方法,接收一个为 Blob 对象的参数,

URL.createObjectURL 该方法可以创建一个 url 地址指向这个 blob 对象,该链接可以被 imga 标签元素 src 属性使用。

现在举一个例子来说明 URL.createObjectURL 如何与 img 这些元素搭配使用

<script type="text/javascript">
    var fileInput = document.createElement('input');
    fileInput.type = 'file';

    fileInput.addEventListener('change',function( e ){
        if ( this.files[0].type.indexOf('image') < 0 ) {
            return alert('请上传图片文件噢');
        }
        var file = this.files[0];
        var img = document.createElement('img');
        img.src = URL.createObjectURL( file );
        img.onload = function(){
            console.log(arguments);
        }
        document.body.append(img);
    });
    document.body.append(fileInput)
</script>


评论表单

Copyright © 2018 睿懿php | 蜀ICP备17011020号-1 | Powered by Aaron