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 

HTML5新增了关于文件的File，FileReader两个对象，用于获取文件信息和读取文件信息。

var

    fileInput = document.getElementById('test-image-file'),

    info = document.getElementById('test-file-info'),

    preview = docement.getElementById('test-image-preview')

//监听change事件

fileInput.addEventListener('change', function() {

  //清除背景图片

  preview.style.backgroundImage = ''

  //检查文件是否选择

  if(!fileInput.value) {

    info.innerHTML = '没有选择文件'

    return

  }

  //获取file文件引用：

  var file = fileInput.files[0]

  //获取文件信息

  info.innerHTML = '文件：' + file.name + '<br>' +

                  '大小：' + file.size + '<br>' +

                  '修改：' + file.lastModifiedDate

if(file.type !== 'image/jpeg' &&file.type !== 'image/png' &&file.type !== 'image/gif') {

  alert('不是有效的图片文件')

  return

}

  //读取文件

  var reader = new FileReader()

  reader.onload = function(e) {

    var data = e.target.result

  preview.style.backgroundImage = 'url('+ data + ')'

  }

  //以DataURL的形式读取文件：

  reader.readerAsDataURL(file)

})

解决方法：

1、通过IE的FSO方法，不过该方法只有IE中可以使用

2、通过Ajax方式读取文本，该方法通用，建议使用该方法

代码示例：

$(document).ready(function(){

  $("#b01").click(function(){//比如再按钮的单击事件中

  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false})//通过ajax读取test1.txt文本文件。

  $("#myDiv").html(htmlobj.responseText.replace(/.+/g,'</br>'))//根据回车换行符进行替换，替换成html换行符<br>

  })

})

<div id='myDiv'></div>

<input type='button' id='b01' value='读取文本'/>

---