读取本地文件流

发表于 2020-06-10 16:47:34   |   下载附件   |   字体:
读取文件流上传上传本地图片本地图片预览本地图片上传预览
// 读取图片函数
var readImgFileUrl = function (me, option) {
    var defaultOption = {
        // 开始读取图片
        loadStart: function (e) {
        },
        // 读取完成
        complete: function (r) {
        },
        // 读取出错
        error: function (e) {
        }
    }
    var opts = $.extend(defaultOption, option);
    // 读取图片数据 并传入回调
    var imgObject;
    if (!me.files.length) {
        return;
    } else {
        if (me.files[0].type == 'image/jpeg' || me.files[0].type == 'image/jpg' || me.files[0].type == 'image/png') {
            imgObject = me.files[0];
        } else {
            alert("此图片格式不正确!");
            return;
        }
    }
    // 图片的正准方向
    // var orientation;

    // EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
    // EXIF.getData(imgObject,function(){
    //     orientation = EXIF.getTag(this,'Orientation');
    // });

    // HTML5 用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据
    var fileReader = new FileReader();
    // 开始读取
    fileReader.onprogress = function (e) {
        // 开始读取
        console.log((e.loaded / e.total * 100).toFixed() + "%");
    };
    // 读取完成
    fileReader.onload = function (e) {
        //这里可以使用校正后的图片data了
        opts.complete(data);
    };
    // 读取出错
    fileReader.onerror = function (e) {
        // alert("图片加载失败");
        opts.error(this, e);
    };
    // 读取文件内容
    fileReader.readAsDataURL(imgObject);
    // 开始加载的回调函数
    opts.loadStart.call(fileReader, imgObject);
}