jquery - Malsup 表单上传卡在%Complete==100(引导进度上传)

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 中显示上传文件的线索，我将不胜感激。

屏幕截图

问候，

Answer 1

“完整”方法怎么样？ 我只是在jsbin中放了一个jquery表单插件的示例，你看一下here ...

这是您的脚本+“完整”方法:

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