原生js获取文件

JavaScript087

原生js获取文件,第1张

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)

})

JS读写文件，分别如下：

//读文件

function readFile(filename){

var fso = new ActiveXObject("Scripting.FileSystemObject")

var f = fso.OpenTextFile(filename,1)

var s = ""

while (!f.AtEndOfStream)

s += f.ReadLine()+"\n"

f.Close()

return s

}

//读文件

function readFile(filename){

var fso = new ActiveXObject("Scripting.FileSystemObject")

var f = fso.OpenTextFile(filename,1)

var s = ""

while (!f.AtEndOfStream)

s += f.ReadLine()+"\n"

f.Close()

return s

}

//写文件

function writeFile(filename,filecontent){

var fso, f, s

fso = new ActiveXObject("Scripting.FileSystemObject")

f = fso.OpenTextFile(filename,8,true)

f.WriteLine(filecontent)

f.Close()

alert('ok')

}

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<script>标签，输入js代码：var a = location.href.split('/')document.body.innerText = a[a.length - 1]。

3、浏览器运行index.html页面，此时成功获取到当前页面文件名index.html并打印了出来。