js如何读取服务器端文件目录

JavaScript020

js如何读取服务器端文件目录,第1张

1、先准备一个json文件。

2、使用vscode创建一个html文件。

3、开始撰写js方法,使用原生javascript来处理,先处理读取json文件,之后运行这个html。

4、得到的json就是我们index.json文件中的内容。

5、为了便于查看我们json文件的内容显示在html网页中。

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)

})