загрузка файла с помощью плагина 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