Question

我在下面有这个表格。

<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="text" name="name[]" id="name"><br>
  <input type="text" name="name[]" id="name"><br>
  <input type="file" name="file1" id="file1"><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
</form>

这是我的函数uploadFile。

function uploadFile(){
    var file = _("file1").files[0];
    var name = _("name").value;
    alert(name); 
    var formdata = new FormData();
    formdata.append("file1", file);
    formdata.append("name", name);

现在我的问题是我想获取我的文本框数组的值name[] ..当我尝试提醒名称变量时，只显示第一个索引。任何帮助将不胜感激。提前谢谢..

Answer 1

getElementsByName（）方法返回文档中具有指定名称（name属性的值）的所有元素的集合，作为NodeList对象。

var mynames= document.getElementsByName("name[]");
console.log(mynames[0].value); //Outputs "atrib name 1"

Answer 2

试试这个：

function uploadFile() {
  var names = document.getElementsByName('name[]');
  for (var i = 0, iLen = names.length; i < iLen; i++) {
    alert(names[i].value);
  }
}

<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="text" name="name[]" id="name">
  <br>
  <input type="text" name="name[]" id="name">
  <br>
  <input type="file" name="file1" id="file1">
  <br>
  <input type="button" value="Upload File" onclick="uploadFile()">
</form>

getElementsByName将返回argument
中提供名称的所有元素（数组）

Answer 3

这是最简单的异步多文件上传器......这是计算和内存效率最高的......出于清晰的原因，我将css排除在外。

“You Can Thank Me Later” - Drake“jimmy brooks”Graham

// HTML＆amp; JS

<!DOCTYPE html>
<html>
<head>  
<script>
function uploadFile(formdata){  
    var data = new FormData();
    var request = new XMLHttpRequest();
    for(var i=0; i < formdata.length; i++){
        if(formdata[i].tagName !== "BUTTON"){                 
            if(formdata[i].type === "file"){                
                for(var x=0; x < formdata[i].files.length; x++){
                    data.append(formdata[i].files[x].name, formdata[i].files[x]);
                }
            }
            else{
                data.append(formdata[i].name, formdata[i].value);
            }
        }
    }
    request.open("POST", "dump.php");
    request.send(data);
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            console.log(request.response);
        }
    }   
}
</script>   
</head>
    <body>  
        <form onsubmit="return false;">
          <input type="text" name="name">
          <input type="file" multiple>
          <button onclick="uploadFile(this.parentNode.children)">Upload Files</button>
        </form> 
    </body>
</html>

// PHP（将响应转发回回调）

<?php
    var_dump($_POST);   
    var_dump($_FILES);
?>

Answer 4

当我尝试警告name变量时，只显示第一个索引达

根据你的评论：

function _(e){ return document.getElementById(e); }

问题是getElementById()返回具有给定id的第一个html元素，无论具有相同id的页面上存在多少其他元素。

首先要避免在页面上重复id，正如其他人所建议的那样，你可以去访问带有name属性的文本框：

＆＃13;

var names = document.getElementsByName("name[]");
var values = [];
var i = names.length;
while (i--)
  values.unshift(names[i].value);
alert(values);

＆＃13;

<input type="text" name="name[]" value="Alex" />
<br/>
<input type="text" name="name[]" value="James" />

＆＃13;

如何使用javascript获取文本框数组

4 个答案: