当前位置:懂科普 >

IT科技

> js读取文件

js读取文件

<link rel="stylesheet" href="https://js.how234.com/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /><script type="text/javascript" src="https://js.how234.com/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript"> SyntaxHighlighter.all(); </script>

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);    }

js读取文件

标签: 文件 js 读取
  • 文章版权属于文章作者所有,转载请注明 https://dongkepu.com/itkeji/33lz8x.html