Question

我正在根据malsup代码上传文件。我改编了DANIEL MORGAN's File Upload Progress Twitter Bootstrap PHP 1的代码：http://www.danmorgan.net/programming/file-upload-progress-twitter-bootstrap-php/。

上传过程工作正常。但是当上传完成/当percentComplete == 100时。上传已冻结，进度条保持运行状态为活动状态。

JS

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
<script type="text/javascript">
$('#ajaxUpload').ajaxForm( {
    dataType : 'json',
    beforeSubmit: function() {
        $(this).addClass('loading');
        //$('#uploadBox').html('<div id="progressOverlay"><div class="progress progress-striped"><div class="bar" id="progressBar" style="width: 0%;">0%</div></div></div>');
        $('#uploadBox').html('<div class="progress progress-striped active"><div class="progress-bar" id="progressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"><span class="sr-only">0%</span></div></div>');
    },
    uploadProgress: function ( event, position, total, percentComplete ) {
        if (percentComplete == 100) {
            $('#progressBar').css('width',percentComplete+'%').html('Processing...');
        } else {
            $('#progressBar').css('width',percentComplete+'%').html(percentComplete+'%');
        }
    },
    success:function(json){
        if(!json.error) location.reload(true);//refresh after ajax call succeed
        //$('#ajaxUpload')[0].reset();//reset form after uploaded
    }
});
</script>

HTML

<form id="ajaxUpload" class="form-inline" method="post" enctype="multipart/form-data" action="inc/eval_uploader.php">
<input type="hidden" name="evl_sid" value="$rec_sStd[std_sid]" />
<input type="hidden" name="evli_sid" value="$rec_sStdi[stdi_sid]" />
<div id="uploadBox"></div><!-- /uploadBox -->
<div class="form-group">
<label class="sr-only">uploader</label>
    <input type="file" class="hide" name="upl" id="upl" onchange="$(this.form).submit();"/>
    <input type="text" name="floc" id="floc" size="5" class="form-control width-auto" maxlength="4" autocomplete="off" placeholder="เช่น 217" />
    <button class="btn btn-primary"  onClick="$('#upl').click();"><i class="glyphicon glyphicon-upload"></i>&nbsp;เลือกไฟล์ & อัพโหลด</button>                  
</div><!-- /form-group -->              
</form>

现在我需要知道为什么它会加载进度。如果你能给我一个上传显示在div＃uploadBox中显示的文件的线索，那将是一个巨大的欣赏。

屏幕截图

malsup frozen at percentComplete==100

此致

Answer 1

＆＃39;完成＆＃39;方法？我只是在jsbin中放了一个jquery表单插件的样本，看看here ......

这是您的脚本+完成＆＃39;方法：

<script type="text/javascript">
$('#ajaxUpload').ajaxForm( {
    dataType : 'json',
    beforeSubmit: function() {
        $(this).addClass('loading');
        //$('#uploadBox').html('<div id="progressOverlay"><div class="progress progress-striped"><div class="bar" id="progressBar" style="width: 0%;">0%</div></div></div>');
        $('#uploadBox').html('<div class="progress progress-striped active"><div class="progress-bar" id="progressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"><span class="sr-only">0%</span></div></div>');
    },
    uploadProgress: function ( event, position, total, percentComplete ) {
        if (percentComplete == 100) {
            $('#progressBar').css('width',percentComplete+'%').html('Processing...');
        } else {
            $('#progressBar').css('width',percentComplete+'%').html(percentComplete+'%');
        }
    },
    success:function(json){
        $('#progressBar').css('width','100%').html('Upload complete...');
        //if(!json.error) location.reload(true);//refresh after ajax call succeed
        //$('#ajaxUpload')[0].reset();//reset form after uploaded
    },
    complete: function(xhr) {
        //You can use here to do whatever you want with the progress bar

        //This show the file uploaded
        status.html(xhr.responseText);
    }
});
</script>

在html中添加状态div：

<div id="status"></div>

Answer 2

我推荐另一个jQuery文件上传工具http://blueimp.github.io/jQuery-File-Upload/。使用jQuery https://github.com/blueimp/jQuery-File-Upload/tree/master/js上传文件有一些很好的解决方案。幸运的是，这也是使用Bootstrap CSS框架和Glyphicons构建的。但最重要的是进度条可以高效工作。

我遇到了同样的问题。进度条达到100％后，显示结果将花费两秒钟左右的时间。换句话说，在success的函数完成后大约两秒钟将调用.ajaxForm中uploadProgress的函数。

希望它有所帮助。

Malsup表单上传卡在percentComplete == 100（引导进度上传）

2 个答案: