0

我有以下 Web 表单来使用 jquery 上传单个文件，显示进度条并在文件上传后显示一条消息：

 <form id="uploadFileForm" method="post" action="upload.php" enctype="multipart/form-data">
         <input type="file" size="60" name="fileToUpload" />
         <input type="submit" value="Upload">
</form>
     <div id="progress">
            <div id="bar"></div>
            <div id="percent">0%</div >
    </div>
    <br />
    <div id="message"></div>

在网页的头部部分，我有相关的 javascript 代码，通过其 id 检测上传表单，以及格式化进度条和消息 div 的 css：

<script>
    $(document).ready(function()
    {
        var options = { 
        beforeSend: function() 
        {
            $("#progress").show();
            //clear everything
            $("#bar").width(\'0%\');
            $("#message").html("");
            $("#percent").html("0%");
        },
        uploadProgress: function(event, position, total, percentComplete) 
        {
            $("#bar").width(percentComplete+\'%\');
            $("#percent").html(percentComplete+\'%\');
        },
        success: function() 
        {
            $("#bar").width(\'100%\');
            $("#percent").html(\'100%\');

        },
        complete: function(response) 
        {
            $("#message").html("<font color=\'#85a129\'>"+response.responseText+"</font>");
        },
        error: function()
        {
            $("#message").html("<font color=\'#CC3300\'> ERROR: unable to upload files</font>");
        }

    }; 
         $("#uploadFileForm").ajaxForm(options);
    });

    </script>

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

一切都很完美，我很满意。但是，我希望在同一页面的不同区域有多个表单，允许上传其他文件（每个文件一个表单）。我通过添加新表单并为每个更改 id 的表单（例如 uploadFileForm2、uploadFileForm3、...）以及与进度条关联的 div 的 id（progress2、bar2、percent2）复制 javascript 代码来实现这一点,...) 和消息 (message2,...)。

这显然是非常多余的。

如何概括我的 javascript 代码，以便它检测上传表单的所有 id 以及它们各自的进度条和消息？

是否还有一种方法可以为所有进度条设置一个 CSS 规范，即使它们具有不同的 ID？

4

1 回答 1

1

尝试

//Add data-progress and data-message with the id of those as values
<form id="uploadFileForm" method="post" action="upload.php" enctype="multipart/form-data" data-progress="#progress" data-message="#message">
    <input type="file" size="60" name="fileToUpload" />
    <input type="submit" value="Upload" />
</form>
<div id="progress" class="progress">
    <div id="bar" class="bar"></div>
    <div id="percent" class="percent">0%</div>
</div>
<br />
<div id="message" class="message"></div>

然后

$(document).ready(function () {
    function ajaxSubmit(form) {
        var $form = $(form),
            $progress = $($form.data('progress')),
            $message = $($form.data('message')),
            $bar = $progress.find(".bar"),
            $percent = $progress.find(".percent");
        var options = {
            beforeSend: function () {
                $progress.show();
                //clear everything
                $bar.width('0%');
                $percent.html("");
                $message.html("0%");
            },
            uploadProgress: function (event, position, total, percentComplete) {
                $bar.width(percentComplete + '%');
                $percent.html(percentComplete + '%');
            },
            success: function () {
                $bar.width('100%');
                $progress.find(".percent").html('100%');

            },
            complete: function (response) {
                $message.html("<font color=\'#85a129\'>" + response.responseText + "</font>");
            },
            error: function () {
                $message.html("<font color=\'#CC3300\'> ERROR: unable to upload files</font>");
            }

        };
    }
    ajaxSubmit($("#uploadFileForm"));
    ajaxSubmit($("#uploadFileForm1"));
    ajaxSubmit($("#uploadFileForm2"));
});
于 2013-10-18T00:50:20.973 回答