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)

})

---