Native JavaScript获取文件路径的姿势

前端

2023-09-25 19:19:19

如何获取input type=file控件文件路径的终极指南

前言

文件上传功能在现代web应用中无处不在，从提交简历到分享照片，你需要一种方法来获取用户选择的本地文件路径。input type=file控件是此任务的首选，但获取文件路径可能是一个挑战，特别是对于初学者而言。

本文将指导你使用原生JavaScript轻松获取input type=file控件的文件路径。我们将涵盖所有方法，从获取本地文件路径到获取网络文件路径。

获取本地文件路径

使用files属性

最简单的方法是使用input控件的files属性。这是一个包含所选文件的文件列表。

var input = document.querySelector('input[type="file"]');
var files = input.files;

for (var i = 0; i < files.length; i++) {
  var file = files[i];
  var path = file.path; // 获取文件路径
}

使用webkitRelativePath属性

对于不支持path属性的浏览器，你可以使用File对象的webkitRelativePath属性。

var input = document.querySelector('input[type="file"]');
var files = input.files;

for (var i = 0; i < files.length; i++) {
  var file = files[i];
  var path = file.webkitRelativePath; // 获取文件路径
}

获取网络文件路径

使用createObjectURL()方法

对于网络文件，可以使用createObjectURL()方法创建一个指向所选文件的URL。

var input = document.querySelector('input[type="file"]');
var files = input.files;

for (var i = 0; i < files.length; i++) {
  var file = files[i];
  var url = URL.createObjectURL(file);
  var path = url.split('/').pop(); // 获取文件路径
}

使用readAsDataURL()方法

另一个获取网络文件路径的方法是使用readAsDataURL()方法。

var input = document.querySelector('input[type="file"]');
var files = input.files;

for (var i = 0; i < files.length; i++) {
  var file = files[i];
  var reader = new FileReader();
  reader.onload = function(e) {
    var dataURL = e.target.result;
    var path = dataURL.split(',')[1]; // 获取文件路径
  };
  reader.readAsDataURL(file);
}