Ajax 表单数据文件上传及进度百分比

Question

我得到了相同的代码，但遇到了这种错误：

未捕获的类型错误：无法读取 HTMLInputElement 中未定义的属性“0”。(upload.js:18) 在 HTMLInputElement.dispatch (jquery-3.3.1.slim.min.js:2) 在 HTMLInputElement.v.handle (jquery-3.3.1.slim.min.js:2)

这是我的代码：

$(document).ready(function(){
    $('.upload-btn').on('click', function(){
        $('#upload-input').click();

        $('.progress-bar').text('0%');
        $('.progress-bar').width('0%');
    });

    $('#upload-input').on('change', function(){
        var uploadInput = $('#upload-input').val();

        if(uploadInput != undefined){
        //    var form = $('form')[0];// You need to use standard javascript object here

            var formData = new FormData();
            console.log(uploadInput[0]);
            
            formData.append('upload', uploadInput[0].files[0]).val();

            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data){
                    uploadInput.val('');
                },

                xhr: function(){
                    var xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener('progress', function(e){
                        if(e.lengthComputable){
                            var uploadPercent = e.loaded / e.total;
                            uploadPercent = (uploadPercent * 100);

                            $('.progress-bar').text(uploadPercent + '%');
                            $('.progress-bar').width(uploadPercent + '%');

                            if(uploadPercent == 100){
                                $('.progress-bar').text('Completed');
                                $('#completed').text('File Uploaded');
                            }
                        }
                    }, false);

                    return xhr;
                }
            })
        }
    })
})

<div class="row">
  <div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar"></div>
  </div>   
  <button class="btn btn-success btn-md upload-btn" type="button">Upload File</button>
  <input type="file" class="form-control" name="upload" id="upload-input" style="display: none;">
</div>

Answer 1

你的代码有很多错误

var uploadInput = $('#upload-input').val();

1. 您正在选择文件路径，而不是<input>标记更改它：var uploadInput = $('#upload-input');

2. 这是错误的 SyntexformData.append('upload', uploadInput[0].files[0]).val(); 更改它：formData.append('upload', uploadInput[0].files[0]);

工作代码：

$(document).ready(function(){
    $('.upload-btn').on('click', function(){
        $('#upload-input').click();

        $('.progress-bar').text('0%');
        $('.progress-bar').width('0%');
    });

    $('#upload-input').on('change', function(){
        var uploadInput = $('#upload-input');

        if(uploadInput != undefined){
        //    var form = $('form')[0];// You need to use standard javascript object here

            var formData = new FormData();
            console.log(uploadInput[0]);

            formData.append('upload', uploadInput[0].files[0]);

            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data){
                    uploadInput.val('');
                },

                xhr: function(){
                    var xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener('progress', function(e){
                        if(e.lengthComputable){
                            var uploadPercent = e.loaded / e.total;
                            uploadPercent = (uploadPercent * 100);

                            $('.progress-bar').text(uploadPercent + '%');
                            $('.progress-bar').width(uploadPercent + '%');

                            if(uploadPercent == 100){
                                $('.progress-bar').text('Completed');
                                $('#completed').text('File Uploaded');
                            }
                        }
                    }, false);

                    return xhr;
                }
            })
        }
    })
})