Ajax表单没有调用uploadProgress

时间:2014-09-15 06:44:58

标签: javascript jquery ajax ajaxform

这是我的代码:

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!');   
        }
    });

由于某种原因,不会调用uploadProgress函数。我在stackoverflow上看到了一些类似的问题,但它是关于IE的 - 我现在正在使用Chrome,但我仍然有这个问题。

我有最新版本的jquery.form.js。

0 个答案:

没有答案