如何根据javascript中的文件名自动填写表单？答案

【问题标题】：How do I autofill a form based on the name of a file in javascript?如何根据javascript中的文件名自动填写表单？
【发布时间】：2021-03-15 01:04:40
【问题描述】：

我在 HTML 中创建了一个表单，要求用户上传文件。我想要做的是获取这个文件的名称，假设它被命名为name_456_031421.mp4，并用每个“_”分割文件名，然后将其自动填充到表单的输入字段中。然后将所有这些信息提交到数据库。

文件示例：

上传文件：name_456_031421.mp4 门：名称代码：456 区域：031421

我遇到的问题是我什至无法获取文件的名称，而且我不确定从那里完成剩下的任务，因为我对 JS 和我查找的其他资源似乎并不是我正在寻找的完成这项任务的资源。到目前为止，我将不胜感激有关此代码的任何建议，以及有关如何进一步处理此问题其余部分的任何提示。谢谢！

这是我的 HTML 表单：

<form method = "post" action = "../PHPDATABASE/vid-upload.php" enctype="multipart/form-data">

门：

<label for = "code"> Code:</label>   
<input type = "text" name = "code" />

<label for = "area"> Type: </label>
<input type = "text" name = "area" /> </form>

这是我目前获取文件名的 javascript 代码：

var input = document.getElementById( 'form-upload-name' );
var infoArea = document.getElementById( 'uploaded-filename' );

console.log(input);
console.log(infoArea);

input.addEventListener( 'change', showFileName );

function showFileName( event ) {
  
  var input = event.srcElement;
  
  var fileName = input.files[0].name;
  
  infoArea.textContent = 'File name: ' + fileName;
  console.log(infoArea);
}

【问题讨论】：

你试过这样的事情吗？ stackoverflow.com/a/19807149/4127740 您可以将showFileName 函数更改为getFileData
您是否期望用户编辑此信息？如果没有，请上传文件并在服务器上提取字段。

标签： javascript php html

【解决方案1】：

您可以在event 对象的target 属性上使用files 方法来获取文件信息。

const uploadInput = document.querySelector("#upload-input");
const codeInput = document.querySelector("#code");
const areaInput = document.querySelector("#area");

uploadInput.addEventListener('change', e => {
  // METHOD 1
  // const name = e.target.value;
  // console.log( name );

  // METHOD 2 RECOMMENDED
  // e.target.files contains info of the selected files
  const file = e.target.files;
  // To grab first file info
  const firstFileInfo = file[0];
  const nameOfFile = firstFileInfo.name;
  const getNameWithoutExtension = nameOfFile.split(".")[0];
  const [name, code, area] = getNameWithoutExtension.split("_");

  codeInput.value = code;
  areaInput.value = area;
})

    <label for="upload-input">Select a file:</label>
    <input type="file" id="upload-input" name="myfile">

    <label for = "code"> Code:</label>
    <input type = "text" name = "code" id="code"/>

    <label for = "area"> Type: </label>
    <input type = "text" name = "area" id="area"/>

【讨论】：

【解决方案2】：

根据您提供的粗略代码，这里的概念证明提取文件名中的三个字段并填充表单中的字段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grabbing a file name.</title>
</head>
<body>


<form method="post" action="../PHPDATABASE/vid-upload.php" enctype="multipart/form-data">

    <input type="file" name="file" id="file"><br>

    <label for = "gate"> Gate:</label>
    <input type="text" name="gate" id="gate" /><br>

    <label for = "code"> Code:</label>
    <input type="text" name="code" id="code" /><br>

    <label for = "area"> Type: </label>
    <input type="text" name="area" id="area"/>

    <input type="submit" name="submit" value="Submit">
</form>
<div id="uploaded-filename"></div>
<script>
    // Use IIFE so we don't pollute global work space
    (function(){
        "use strict";
        let infoArea = document.getElementById( 'uploaded-filename' );

        console.log(infoArea);

        document.getElementById('file').addEventListener( 'change', showFileName );

        function showFileName( event ) {

            // Get the file name and display it
            let fileName = event.target.files[0].name;
            infoArea.innerText = 'File name: ' + fileName;

            // Extract the parts with a regular expression
            let regex = /^(.*?)_(.*?)_(.*?)\./;
            let nameParts = fileName.match(regex);

            // Populate the form fields
            document.getElementById('gate').value = nameParts[1];
            document.getElementById('code').value = nameParts[2];
            document.getElementById('area').value = nameParts[3];

        }

    })();
</script>

</body>
</html>

【讨论】：