js读取文件

js读取文件的操作是什么样的呢？一起来看下吧：

1、js读取文件；

/**
     * 上传图片
     * @param file 传入获取的文件
     * @author wangzhen 2018-09-07
    */
    function loadImg(file,callback){
        //创建读取文件的对象
        var reader = new FileReader();
 
        //创建文件读取相关的变量
        var imgFile;
 
        //为文件读取成功设置事件
        reader.onload=function(e) {
            // console.log('文件读取完成');
            imgFile = e.target.result;
            // console.log(imgFile);
            // $("#imgLicense").attr('src', imgFile);
            // callback(imgFile);
            callback(file);
        };
 
        //正式读取文件
        reader.readAsDataURL(file);
    }

2、将以base64的图片url数据转换为Blob；

// -------- 将以base64的图片url数据转换为Blob --------
    function convertBase64UrlToBlob(urlData, filetype){
        //去掉url的头，并转换为byte
        var bytes = window.atob(urlData.split(',')[1]);
        
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        var i;
        for (i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
 
        return new Blob([ab], {type : filetype});
    }

3、input获取：

（1）html部分；

                                                上传图片

（2）css部分；

.file-box{
            display: inline-block;
            position: relative;
            padding: 3px 5px;
            overflow: hidden;
            color:#fff;
            background-color: red;
            border-radius: 5px;
        }
        .file-btn{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            outline: none;
            background-color: transparent;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            -khtml-opacity: 0;
            opacity: 0;
        }

（3）js部分

function uploadImg(event){
        // console.log(event);
        var imgFile = event.target.files[0];
       //传递参数fd
       var fd = new FormData();
        fd.append("file",imgFile);
    }

以上就是小编今天的分享，希望可以帮助到大家。