jQuery表单上传进度 [英] jQuery forms Upload Progress

问题描述

在Firefox中，Chrome浏览器只能使用大约90％的Chrome浏览器它在100％显示进度

任何想法都非常感谢

*欢呼

编辑我应该提到这是使用jQuery表单插件 http：//jquery.malsup .com / form /

编辑不确定我做了什么，但现在设置状态为99％任何想法如何得到它100％在Firefox ： - ）

我已更新下面的代码

下面的代码

 < style> 
<！ -  
 / * form {display：block;背景：＃333; padding：15px} * / 
 
 .progress {margin-left：auto; margin-right：auto;位置：相对; width：400px; border：1px solid #ddd; padding：1px; border-radius：3px;} 
 .bar {margin-left：auto; margin-right：auto; background-color：＃B4F5B4; width：0％; height：20px; border-radius：3px; } 
 .percent {position：absolute; display：inline-block; top：3px; left：48％;} 
  - > 
< / style> 
  

和jQuery

 < div class =progress> 
< div class =bar>< / div> 
< div class =percent> 0％< / div> 
< / div> 
< div id =status>< / div> 
 
 
< script type ='text / javascript'> 
<！ -  
 
 jQuery（'document'）。ready（function（）{
 var bar = $（'。bar'）; 
 var ％= $（'。percent'）; 
 var status = $（'＃status'）; 
 $（'form'）。ajaxForm（{
 dataType：'script'，
 url：{{= URL（'default'，'user_song_form'）}}，
 beforeSend：function（）{
 status.empty（）; 
 var percentVal = '0％'; 
 bar.width（percentVal）
 percent.html（percentVal）; 
}，
 uploadProgress：function（event，position，total，percentComplete）{
 var percentVal = percentComplete +'％'; 
 bar.width（percentVal）
 percent.html（percentVal）; 
}，
 complete：function（xhr）{ 
 status.html（'Thank You Upload Complete！'）; 
} 
}）; 
}）; 
  - > 
 
< / script> 
  

解决方案

最简单的方法是使用上传者i recommended

http://fineuploader.com/

很酷的是没有必要的外部依赖性

Hello I am trying to figure out how to fix this upload progress bar so that it works in Firefox.

In Firefox it only goes to around 90 % in chrome it displays progress at 100 %

Any ideas are greatly appreciated

*cheers

Edit I should mention this is uses the jQuery form plugin http://jquery.malsup.com/form/

Edit Not sure what I did but it now sets the status to 99 % any ideas how to get it to 100% in firefox :-)

I have updated the code below

code below

<style>
<!--
/*form {display: block; background: #333; padding: 15px}*/

.progress {margin-left:auto; margin-right: auto; position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px;}
.bar {margin-left:auto; margin-right: auto;background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent {position:absolute; display:inline-block; top:3px; left:48%;}
-->
</style>

and the jQuery

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


<script type='text/javascript'>
<!--  

jQuery('document').ready(function() {
    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');   
        $('form').ajaxForm({
            dataType: 'script',
            url: "{{=URL('default', 'user_song_form')}}",
            beforeSend: function() {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },             
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function(xhr) {
                status.html('Thank You Upload Complete!');
            }     
        });         
   });     
-->

</script>

解决方案

the simplest way is to use an uploader i recommend

http://fineuploader.com/

and the cool about it is that No required external dependencies

这篇关于jQuery表单上传进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！