使用 jQuery-File-Upload 插件文件控件上传文件不显示文件名

Question

我想在上传过程中显示一个进度条，然后等待单击按钮开始上传，此时文件输入不再随文件名更新

代码如下：

$(function () {
    var started = false;
    var progress_bar = $('#progress');
    $('#id_document').fileupload({
        dataType: 'html',
        add: function (e, data) { // Code from https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin#how-to-start-uploads-with-a-button-click
            data.context = $('#uploadButton')
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        fail: function (e, data, x) {
            console.info("Upload fail");
        },
        done: function (e, data) {
            console.info("Done");
            $('body').html(data.result);
        },
        progressall: function (e, data) {
            if (!started) {
                $('#upload_input').slideUp();
                $('#progress-bar').removeClass('hidden');
                started = true;
            }
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress-bar').css('width',progress + '%');
            $('#progress-bar').html(progress + '%');
        }
    });
});

如何让文件名仍然显示在输入中？

Answer 1

<form>
  <input type="file" id="file-upload" multiple required />
  <label for="file-upload">Browse</label>
  <div id="file-upload-filename"></div>
  <button type="submit">Add</button>
</form>



var input = document.getElementById( 'file-upload' );
var infoArea = document.getElementById( 'file-upload-filename' );

input.addEventListener( 'change', showFileName );

function showFileName( event ) {

  // the change event gives us the input it occurred in 
  var input = event.srcElement;

  // the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here.
  var fileName = input.files[0].name;

  // use fileName however fits your app best, i.e. add it into a div
  infoArea.textContent = 'File name: ' + fileName;
}

在这里查看：https://codepen.io/bhavinG/pen/QXajZL