在反应输入文件或预览表单图像中获取图像 URL - JavaScript

当用户在表单中上传图像或预览图像时，我们经常需要获取该图像的 URL，以便在其他地方使用它，例如发送给服务器或在其他页面中显示它。这个过程需要一些 JavaScript 代码，下面是如何实现它的步骤：

1. 创建一个 input 标签

首先，我们需要在HTML中创建一个 input 标签，并设置其类型为 "file"，这将使其成为一个选择文件的按钮。这个标签将用于允许用户选择他们想上传的图像。

<input type="file" id="imageInput" onchange="handleFiles(this.files)">

2. 获取文件对象和URL

当用户选择图像后，我们需要获取该文件对象，并使用它来创建一个 URL。我们可以通过以下 JavaScript 代码实现这一点：

function handleFiles(files) {
  var file = files[0];
  var img = document.createElement("img");
  var reader = new FileReader();
  reader.onload = function(e) {
    img.src = e.target.result;
    var url = URL.createObjectURL(file);
    console.log(url);
  }
  reader.readAsDataURL(file);
}

上面的代码首先创建了一个 img 元素，然后使用 FileReader 对象读取文件，并将其读取的结果赋值给 img 的 src 属性。接下来，我们使用 URL.createObjectURL() 函数将文件对象转换为一个 URL，并打印该 URL 到控制台。

3. 将 URL 应用于需要它的地方

我们现在已经可以获取图像的 URL，但这并不是我们需要它的唯一地方。我们可以将 URL 应用于任何需要它的地方。例如，我们可以在表单提交时发送 URL 到服务器，或者将其用于在页面上显示图像。下面是如何在页面上显示图像的代码：

function handleFiles(files) {
  var file = files[0];
  var img = document.createElement("img");
  var reader = new FileReader();
  reader.onload = function(e) {
    img.src = e.target.result;
    var url = URL.createObjectURL(file);
    document.body.appendChild(img);
  }
  reader.readAsDataURL(file);
}

上面的代码在读取图像并创建 URL 后，将 img 元素附加到 HTML 的 body 元素上，从而在页面上显示图像。

结论

在反应输入文件或预览表单图像中获取图像 URL 是一个基本的 JavaScript 技能，这可以帮助我们在处理用户上传的图像时更有效地工作。希望这篇文章对您有所帮助！