jQuery表单上传进度答案

【问题标题】：jQuery forms Upload ProgressjQuery表单上传进度
【发布时间】：2012-07-07 16:03:31
【问题描述】：

您好，我正在想办法解决这个上传进度条，以便它可以在 Firefox 中运行。

在 Firefox 中，它仅达到 90% 左右，在 chrome 中显示进度为 100%

非常感谢任何想法

*干杯

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

编辑不确定我做了什么，但它现在将状态设置为 99% 任何想法如何在 Firefox 中将其设置为 100% :-)

我已经更新了下面的代码

代码如下

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

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

【问题讨论】：

标签： javascript jquery css forms

【解决方案1】：

最简单的方法是使用我推荐的上传器

http://fineuploader.com/

它的酷之处在于不需要外部依赖

【讨论】：

【解决方案2】：

我通过更改完整功能解决了上传状态的问题

jQuery 代码现在如下所示

<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) {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
                status.html('Thank You Upload Complete!');
            }     
        });         
   });     
-->

</script>

【讨论】：

【解决方案3】：

考虑使用 uploadify 作为替代方案。它运行良好，在 IE 和 Firefox 100% 下运行

http://www.uploadify.com/

【讨论】：

我尝试让 uploadify 工作 3 天，但一直收到 HTTP 错误或 IO 错误，我阅读了几篇关于它的帖子，但都无法解决。所以在这一点上，我对 Uploadify 没什么好说的，而且 Flash 在大多数移动平台上都不起作用……无论如何 :-)