0

我有一个带有文本输入字段和文件上传的表单。

我还在使用 jQuery 验证和 jQuery Form Plugin ( http://malsup.com/jquery/form/ ) 插件

我想显示上传进度（我的工作没有问题），但是一旦上传完成，我希望表单像往常一样提交，而不是通过 ajax。这可能吗？

我的代码如下。任何帮助将不胜感激！

        <form role="form" action="new_version.php?id=<?php echo $_GET['id']; ?>" method="post" enctype="multipart/form-data" id="newVersion">
            <?php echo $session->form_errors(); ?>
            <div class="form-group">
                <input name="title" type="text" class="form-control input-lg" placeholder="title" value="<?php echo isset($_POST['title']) ? htmlentities($_POST['title']) : ""; ?>" required />
                <br />
                <div class="panel panel-default">
                    <div class="panel-body">    
                        <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo FILE_SIZE_LIMIT; ?>" />
                        <input name="original" type="file" id="file_upload" />
                    </div>
                </div>
            </div>
            <p id="status"><p>
            <div class="progress progress-striped active" style="display:none;">
                <div class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
            </div>
            <button type="submit" name="submit" value="Upload version" class="btn btn-success btn-block btn-lg">Upload version</button>                 
        </form>
        <script>

            $('#newVersion').validate({
                rules: { 
                    'original': { 
                        required: true 
                    }
                }
            });

            var bar = $('.progress-bar');
            var status = $('#status');
            var successLink = 'project.php?id=<?php echo $_GET['id']; ?>';

            $(document).ready(function() { 
                var options = { 
                    data: { 
                        ajax: 1
                    },
                    beforeSend: function() {
                        var percentVal = '0%';
                        bar.width(percentVal);
                        bar.attr('aria-valuenow', 0);
                        $('.progress').show();
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        bar.width(percentVal);
                        bar.attr('aria-valuenow', percentComplete);
                    },
                    success: function(responseText, statusText, xhr, form) {
                        if(statusText == 'success') {
                            $(location).attr('href', 'project.php?id='+<?php echo $_GET['id']; ?>);
                        }
                    },
                    error: function (responseText, statusText, xhr, form) {
                        alert("Oops... Looks like there has been a problem.");  
                    }

                };               
                // bind form using 'ajaxForm' 
                $('#newVersion').ajaxForm(options); 
            });

        </script>
4

2 回答 2

0

我认为您可以通过执行以下操作来解决此问题：

// AFTER VALIDATION SUCCESS

// copy old form into a new hidden form
$('form#newVersion').after('<form action="something.php" method="POST" id="new_form" style="display:none;">'+$('form#newVersion').html()+'</form>');

// remove file upload box so that file does not get saved twice
$('form#new_form [name="original"]').remove();

// submit new hidden form and user is none-the-wiser
$('form#new_form').submit();
于 2013-09-27T17:03:20.647 回答
0

引用操作：

“我希望表单像往常一样提交，而不是通过 ajax。这可能吗？”

好像不是...

根据 jQuery Form 插件文档：

jQuery 表单插件允许您轻松且不显眼地升级 HTML 表单以使用 AJAX。

如果您不想通过 ajax 提交，也许您不应该使用 ajax 插件。

但是，在这种情况下，任何 JavaScript 进度条都不起作用；因为在单击提交按钮的那一刻，页面将重定向到actionURL，并且用户将看到一个空白页面，直到服务器端脚本处理提交。这是.ajax()设计要解决的问题；它允许与服务器脚本进行交互，而无需重新加载或重定向页面。

于 2013-09-27T16:43:45.860 回答