带有 mootools-form-upload 的文件上传进度条 onclick 事件答案

【问题标题】：File upload progressbar onclick event with mootools-form-upload带有 mootools-form-upload 的文件上传进度条 onclick 事件
【发布时间】：2013-04-17 06:54:02
【问题描述】：

我在当前项目中使用文件上传。当我单击浏览按钮时，文件将自动上传并读取行数并立即显示该详细信息。我完成了这项任务。

但是当我上传大尺寸的文件时，上传需要一些时间。所以我需要实现文件上传进度条。

我使用了下面的例子。

http://aryweb.nl/projects/mootools-form-upload/Demos/Upload.html

http://mootools.net/forge/p/form_upload

<script>
    window.addEvent('domready', function(){
        var upload = new Form.Upload('files', {
            onComplete: function(){
                alert('Completed uploading the Files');
            }
        });
        if (!upload.isModern()){
            // Use something like
        }
    });
</script>

这个脚本运行良好。

但是当我点击提交按钮时，那个时候会显示进度条。

我需要更改当我点击浏览按钮的时间将显示进度条。不知道怎么改。

【问题讨论】：

标签： php javascript jquery ajax mootools

【解决方案1】：

您正在使用 mootools 插件 JavaScript 库，该库允许您上传文件并跟踪进度。和 PHP 关系不大。

由于它的演示和文档没有进度跟踪，如果您仔细查看https://github.com/arian/mootools-form-upload/blob/master/Source/Form.Upload.js，您会发现进度中没有任何回调..

onProgress: function(event){
            var loaded = event.loaded, total = event.total;
            progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%');
        },

所以你需要

使用它期望的建议 HTML (<div class='progress'></div>)，或者
通过扩展之前包含的选项来添加您的自定义行为

【讨论】：