本地解析SQL文件，并传给后台

• FileReader API 介绍

FileReader API

• 使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。
  方法

方法定义	描述
abort():void	终止文件读取操作
readAsArrayBuffer(file):void	异步按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file):void	异步按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file):void	异步读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding):void	异步按字符读取文件内容，结果用字符串形式表示

事件

事件名称	描述
onabort	当读取操作被中止时调用
onerror	当读取操作发生错误时调用
onload	当读取操作成功完成时调用
onloadend	当读取操作完成时调用,不管是成功还是失败
onloadstart	当读取操作将要开始之前调用
onprogress	在读取数据过程中周期性调用

使用方法

FileReader通过异步的方式读取文件内容，结果均是通过事件回调获取

var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        //读取本地文件，以gbk编码方式输出
        var reader = new FileReader();
        reader.readAsText(file,"gbk");
        reader.onload = function(){
            //读取完毕后输出结果
            console.log(this.result);
        }
    }
}

//显示图片缩略图
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;
    
    if (!imageType.test(file.type)) {
      continue;
    }
    
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
    
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

需求

我们需要在本地读取sql文件，并将其解析，发送给后台，后台返回此sql的表结构
成品如图所示：

未选择.jpg

已选择.jpg

• 使用FileReader来读取文件，并使用文本域textarea来展示文件

         /**  
         * 上传函数
         * @param fileInput DOM对象
         * @param callback 回调函数
         */
        var getFileContent = function (fileInput, callback) {
            if (fileInput.files && fileInput.files.length > 0 && fileInput.files[0].size > 0) {
                //下面这一句相当于JQuery的：var file =$("#upload").prop('files')[0];
                var file = fileInput.files[0];
                if (window.FileReader) {
                    var reader = new FileReader();
                    reader.onloadend = function (evt) {
                        if (evt.target.readyState == FileReader.DONE) {
                            callback(evt.target.result);
                            // console.log(evt.target.result)
                            //  sql = evt.target.result
                            //  console.log(this.sql)
                             localStorage.setItem('sql',evt.target.result)
                             console.log(localStorage.sql)
                        }
                    };
                    // 包含中文内容用gbk编码
                    // reader.readAsText(file, 'gbk');
                    reader.readAsText(file, 'utf-8');
                }
            }
        };
       
        /**
         * upload内容变化时载入内容
         */
        document.getElementById('upload').onchange = function () {
            var content = document.getElementById('content');
            getFileContent(this, function (str) {
                content.value = str;
            });
        };
      //  console.log(this.sql)
      }

• 由于目前sql文件都不算太大，我是先将其存入localStorage中，比较偷懒，因为这个项目还要重构，所以就没改了