Question

我正在尝试创建一个多文件上传系统，但document.getElementById("file1[]")的长度属性未定义。

未捕获的TypeError：无法读取未定义的属性“长度”

我尝试在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>  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> 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>

两者都不起作用。

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

HTML CODE：

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

Javascript代码：

$index

Answer 1

由于

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

是一个集合，你表现得像是一个单独的元素。您需要参考各个元素。

fileInput[0].files

文件上传长度错误（... files.length）

1 个答案: