Ajax form not calling uploadProgress

This is my code:

HTML:

<form id="myForm" enctype="multipart/form-data" action="api/upload.php" method="POST">
    <input type="hidden" />
    <input id="upload" name="userfile" type="file" class="choose-file"/>
    <button class="choose-picture"></button>
    <div class="filename"></div>
    <input type="submit" class="send-button" value='' />
</form>

<div class="progress">
   <div class="bar"></div >
   <div class="percent">0%</div >
</div>
<div id="status"></div>

      

JS:

picUpload: function() {
    var bar = $(this.el).find('.bar');
    var percent = $(this.el).find('.percent');
    var status = $(this.el).find('#status');

    $(this.el).find('#myForm').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {

            alert('upload progress!');
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        success: function(data) {
            //   console.log(data);
            document.cookie = "imagePath=" + data;
            var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)imagePath\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            console.log(myCookie);

            $('.full-picture-col').html('<img src="' + data + '" class="img-responsive" />').fadeIn('slow');
            $('.left-picture-col').hide();
            $('.right-picture-col').hide();
        },
        error: function($form, options) {
            alert('Wystąpił błąd!');   
        }
    });

      

For some reason the uploadProgress function is not called. I've seen some similar problems here on stackoverflow, but this was about IE. I am currently working on Chrome and I have this problem.

I have the latest version of jquery.form.js.

+3


source to share





All Articles