Question

嘿伙计我有一个简单的表单，当用户完成选择图像后，当用户在文件浏览窗口中单击打开时，会提交该表单。

我的HTML看起来像下面的内容。

<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data">
        <div class="fileUpload btn btn-lg btn-primary">
            <span>Choose File</span>
            <input id="imageToBeUploaded" type="file" class="upload" name="image"/>
        </div>
</form>

的JavaScript

$("body").on('submit', '#imgForm', function(){
    $(this).ajaxForm({target:'#uploadStatus'});
    console.log("submitting...");
    return false;
});

/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function() {
    //submit the form
    $("#imgForm").submit();
});

我的问题是表单已提交但重定向到带有响应的action.php页面。我希望在当前页面上取回响应时停止重定向发生。返回false;似乎不像http://malsup.com/jquery/form/#ajaxSubmit

中的文件那样工作

非常感谢任何帮助！

请注意，我必须支持IE8 / 9，这意味着formData是不可能的！

谢谢。

Answer 1

只需尝试使用此JavaScript / jQuery代码并使用您的服务器脚本进行管理。

max-height: 100%; /* or a bit less */

祝你好运[＆＃39;}

Answer 2

尝试实施此代码：

window.location.href它是一个告诉您浏览器当前网址的属性。更改属性的值将重定向页面。

$("body").on('submit', '#imgForm', function(){
var a;
var b;
window.location.href = "../currenturl.htm?parameter1="+a+"&parameter2="+b;
or
window.location.href = "../currenturl.htm";
//where your browser need to stay(current) url should be mentioned here.
});

Answer 3

您引用的网页大约是$(this).ajaxSubmit(options);，而不是$(this).ajaxForm(options);。你试过$(this).ajaxSubmit(options);吗？这两者不是同义词。你似乎在混淆他们的实现。

根据文档，以下是ajaxSubmit()：

的使用方法

$(document).ready(function() {
    $('#imgForm').on('submit', function(){
        $(this).ajaxSubmit({target:'#uploadStatus'});
        console.log("submitting...");
        return false;
    });

    $('#imageToBeUploaded').on('change', function() {
        //trigger submit event
        $("#imgForm").submit();
    });
});

ajaxForm()：

$(document).ready(function() {
    $('#imgForm').ajaxForm({target:'#uploadStatus'});

    $('#imageToBeUploaded').on('change', function() {
        //trigger submit event
        $("#imgForm").submit();
    }); 
});

除非您真的需要，否则您不想使用委派活动。如果在DOM就绪事件之后加载表单，则决不使用委托事件。

Answer 4

来自：Prevent page reload and redirect on form submit ajax/jquery

$("body").on('submit', '#imgForm', function(event){
    $(this).ajaxForm({target:'#uploadStatus'});
    console.log("submitting...");
    event.preventDefault();
    return false;
});

/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function(event) {
    //submit the form
    $("#imgForm").submit();
});

Answer 5

$(document).ready(function (e) {
           /* Uploading Profile BackGround Image */
            $('#imageToBeUploaded').on('change', function() {
                //submit the form
                $("#imgForm").submit();
                alert('Form submitted');
            });
            $('#imgForm').ajaxForm({
                target:'#uploadStatus',
                beforeSubmit:function(){
                    alert('File uploading...');
                },
                success:function(){
                    alert('File uploaded');
                },
            });
        });

Answer 6

你可以试试这个：

使用 $（this）.closest（“＃imgForm”）。submit（）;

而不是： $（“＃imgForm”）。submit（）;

$('#imageToBeUploaded').on('change', function() {
     //submit the form
 $(this).closest("#imgForm").submit();
     $("#imgForm").submit();
 });

    $('form#imgForm').on('submit',function(e){
            e.preventDefault();
            $(this).ajaxSubmit({ 
                    url:   'upload', 
                    uploadProgress: function (event, position, total, percentComplete){ 
                       //display status
                        $(".progress-bar").width(percentComplete + '%');
                        $('.progress-bar').html(percentComplete+'%');
                    },
                    success: function(response){
                        alert('Success');
                    },
                    error: function(response, status, e){
                        alert('Oops something went.');
                    },
                    resetForm: true 
                });
        });

您需要在脚本标记＆lt; https://code.google.com/p/struts2-jquery/source/browse/trunk/struts2-jquery-plugin/src/main/resources/template/js/plugins/jquery.form.min.js?r=1645＆gt;

中使用此标记

Answer 7

试试这个

$(document).ready(function() {
    $("#imgForm").ajaxForm({
        target:'#uploadStatus'
    });
});

$('body').on('change','#imageToBeUploaded', function() {
    //submit the form
    $("#imgForm").submit();
});

Answer 8

你应该使用event.preventDefault（）;而不是使用jQuery返回false

$("body").on('submit', '#imgForm', function(event){

    event.preventDefault();

    $(this).ajaxForm({target:'#uploadStatus'});
    console.log("submitting...");
    return false;
});

很多人可能不同意我的观点，但是返回false通常会说失败的事情，而你的ajax提交可能实际上工作得很好，所以它可能会给原来的调用者带来不同的结果。在这种情况下，它确实无关紧要但我只会在实际失败或出错或者请求布尔值时返回false。如果为空结果，我将返回null，而不是false。我猜想只是定罪......

不确定为什么你有2个js函数，但你可以将这两个函数组合为：

$(document).ready(function() { 
    /* Uploading Profile BackGround Image */
    $('body').on('change','#imageToBeUploaded', function() {
        //submit the form
        $('#imgForm').ajaxForm({target:'#uploadStatus'});
        console.log("submitting...");
    });
 });

ajaxForm插件保持重定向到动作页面，忽略返回false;

8 个答案: