文件上传长度错误 (..文件长度)

File Upload Length Error (...files.length)

本文关键字:文件 错误      更新时间:2023-09-26

我正在尝试创建一个多文件上传系统,但是fileInput.files.length的长度属性未定义。

捕获的类型错误:无法读取未定义的属性"长度"

我尝试在document.getElementById("file1[]")中添加和删除方括号

fileInput.files分配给另一个变量并调用thatVariable.length

两者都不起作用。

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

网页代码:

<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>

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>"
    }
}

因为

var fileInput = document.getElementsByName("file1[]");
是一个

集合,你表现得像是一个单一元素。您需要引用各个元素。

fileInput[0].files