Javascript 文件上载长度错误（…files.Length）

我正在尝试创建一个多文件上传系统，但是

fileInput.files.length

的length属性未定义

未捕获的TypeError:无法读取未定义的属性“length”

我已尝试从

document.getElementById（“file1[]）

将

fileInput.files

分配给另一个变量并调用

thatVariable.length

两者都不起作用

由于这是一个多文件上传系统，我需要它在一个数组中

HTML代码：

<form action='/' method='post' enctype="multipart/form-data" id='file'>

    <button type="button" onclick="document.getElementById('file1').click(); return false;" class="btn btn-primary" id='choosefile'><span class='glyphicon glyphicon-open-file'></span>&nbsp; Choose File</button><br>

    <b id="filename"></b><br>

    <input type="text" placeholder="New File Name" id="fileplaceholder">
    <input type="file" id="file1" name="file1[]" style="visibility: hidden" onchange="filenameprint()" multiple>
    <button type="button" onclick="uploadCloud()" class='btn btn-success' id='uploadfile'><span class="glyphicon glyphicon-upload"></span>&nbsp;Upload File</button><br>
    <br>
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40"
             aria-valuemin="0" aria-valuemax="1" style="width:0%" id='progress'>
            <span id='uploadpercent'></span>
        </div>
    </div>
    <span id='loaded'></span>
    <script>
        function filenameprint() {
            var file1 = document.getElementById('file1').value;
            if (!empty(file1)) {
                document.getElementById('filename').innerHTML = file1;
            } else {
                document.getElementById('filename').innerHTML = "No File Chosen"

            }

        }
    </script>
</form>

选择文件



上传文件



函数filenameprint（）{
var file1=document.getElementById（'file1'）。值；
如果（！空（文件1））{
document.getElementById（'filename'）。innerHTML=file1；
}否则{
document.getElementById（'filename'）.innerHTML=“未选择任何文件”
}
}

---

Javascript代码：

function uploadCloud() {

    //Sets the Progress Bar to 0
    _('progress').style.width = "0%";

    //Get's the Upload File Button Object Reference
    var fileInput = document.getElementsByName("file1[]");
    var formData = false;
    //Declares the Form Data Object
    if (window.FormData) {
        formData = new FormData();
    }
    var file, reader;
    console.log((fileInput.files).length);
    for (var i = 0; i < fileInput.files.length; i++) {//ERROR COMES FROM HERE!!!
        file = fileInput.files[i];
        if (window.FileReader) {
            reader = new FileReader();

            reader.onloaded = function (e) {


            }
            reader.readAsDataURL(file);

        }
        if (formData) {
            formData.append('file1', file);
        }
    }

    if (formData) {
        $.ajax({
            url: '/uploadCloud.php', //Server script to process data
            type: 'POST',
            // Form data
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false,
            xhr: function () {  // Custom XMLHttpRequest
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { // Check if upload property exists
                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
                }
                console.log(myXhr);
                return myXhr;

            },
            beforeSend: function () {
                _('uploadfile').setAttribute('disabled', 'disabled');
                _('choosefile').setAttribute('disabled', 'disabled');
            },
            //Ajax events
            success: function (data) {
                if (data == 0) {
                    _('loaded').innerHTML = "";
                    _('progress').style.width = "0%";
                    _('filename').innerHTML = "<b>No File</b>"
                } else {
                    _("filename").innerHTML = data;
                }
                _('uploadpercent').innerHTML = "";
                _('loaded').innerHTML = "";
                _('uploadfile').removeAttribute('disabled');
                _('choosefile').removeAttribute('disabled');
                _('progress').style.width = "0%";
            },
        });

        function progressHandlingFunction(e) {
            if (e.lengthComputable) {
                _('progress').style.width = (e.loaded / e.total) * 100 + "%";
                _('uploadpercent').innerHTML = Math.round((e.loaded / e.total) * 100) + "% complete (" + _('filename').innerHTML + ")";
                _('loaded').innerHTML = "Upload " + Math.round((e.loaded / e.total) * 100) + "% complete [" + e.loaded + " bytes loaded of " + e.total + " bytes total]";
            }
        }
    } else {
        _("filename").innerHTML = "<b>No File</b>"
    }
}

函数uploadCloud（）{
//将进度条设置为0
_（'progress'）。style.width=“0%”；
//获取上传文件按钮对象引用
var fileInput=document.getElementsByName（“file1[]”）；
var formData=false；
//声明表单数据对象
if（window.FormData）{
formData=新的formData（）；
}
var文件，读卡器；
log（（fileInput.files）.length）；
对于（var i=0；i
var fileInput = document.getElementsByName("file1[]");

是一个集合，您的行为就像它是单个元素一样。您需要引用各个元素

fileInput[0].files

我不知道你所说的通行证是什么意思。。你能解释一下吗？我打错了！很抱歉我意识到我不确定问题出在哪里，除了
var fileInput=document.getElementsByName（“file1[]）看起来有点可疑：）你不需要写一篇博文才能拿到吗？博文？不，我正在使用AJAX首先获取文件，然后服务器通过POST在这一行接收它：
console.log（（fileInput.files.length）-您得到预期结果了吗？没有。。返回未定义的wait，
fileInput[0]也是如此。文件
仅指向一个文件。因为我需要它对多个文件是动态的，所以它将指向单个文件输入元素。如果有多个文件输入，则需要在集合上循环，因此我需要在另一个
for（）
循环中循环一个
for（）
循环？是否有多个
元素？如果有，是的……我只有一个
，但是它有multiple属性