Question

我有以下网页表单使用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>

在网页的head部分，我有相关的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的表单的javascript代码（例如uploadFileForm2，uploadFileForm3，...）以及与进度条关联的div的id（progress2，bar2，percent2）来实现此目的。，...）和消息（message2，...）。

这显然非常多余。

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

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

Answer 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"));
});

如何为具有不同id属性的多个表单推广文件上载Web表单的代码？

1 个答案: