简体   繁体   中英

file upload using jQuery-File-Upload plugin file control does not show filename

I want to show a progress bar during upload progress and wait for a click on a button to start the upload when I do that the file input does not update with the filename anymore

Here is the code:

$(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 + '%');
        }
    });
});

How to get the filename still displayed in the input?

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

Check Here : https://codepen.io/bhavinG/pen/QXajZL

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM