Question

我有一个包含图像字段的表单，我使用jquery表单插件在字段更改时通过ajax上传图像。这就是我的问题所在。如果有人输入图像并将其加载到表单中，每当表单再次提交时，它会再次上传相同的图像，我无法正常提交表单。它就像我想要jquery表单插件来处理表单提交一样。

这是我的javascript。

<script src="<?php echo DOMAIN.LIBRARY; ?>js/jquery.form.js" type="text/javascript"></script>
<script src="<?php echo DOMAIN.LIBRARY; ?>uploader/jcrop/js/jquery.color.js" type="text/javascript"></script>
<script src="<?php echo DOMAIN.LIBRARY; ?>uploader/jcrop/js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo DOMAIN.LIBRARY; ?>uploader/jcrop/css/jquery.Jcrop.css" type="text/css" />
<script>
$(document).ready(function(e) {

    $("#fk_profile_form").bind("keypress", function(e) {
            if (e.keyCode == 13) return false;
      });

    var options = { 
        url:       "<?php echo DOMAIN.LIBRARY; ?>uploader/ajaxUpload.php",         // override for form's 'action' attribute 
        success:       showResponse  // post-submit callback 
    }; 

    var $loader = $('<div class="progress progress-striped active" style="width: 200px;"><div class="bar" style="width: 100%;">Uploading...</div></div>');
    $(document).on("change", "#photofield", function() {
        $loader.prependTo('#imageArea');
        $('#fk_profile_form').ajaxForm(options).submit();

    });
    function showResponse(responseText, statusText, xhr, $form)  {  

        // dialog function
        var $uploadedImage = $('<img src="<?php echo DOMAIN; ?>'+responseText+'" id="uploadedImage"></img>').appendTo('#imageArea .controls');

        $('<br /><a href="javascript:;" id="removeImage">Click Here To Upload A Different Photo</a>').appendTo('#imageArea .controls');

        $uploadedImage.Jcrop({
            // start off with jcrop-light class
            bgOpacity: 0.5,
            bgColor: 'white',
            addClass: 'jcrop-light',
            allowResize: true,
            aspectRatio: 1,
            setSelect: [0,0,300,300],
            minSize: [300,300],
            onSelect: updateCoords
        });

        $loader.remove();
        $('#ajaxImageUpload').show();
        $('#photofield').next('span').hide();
        $('#photofield').hide();

    } 

    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };

    function checkCoords()
    {
        if (parseInt($('#w').val())) return true;
        alert('Please select a crop region then press submit.');
        return false;
    };

    $(document).on("click", "#removeImage", function(e) {
        e.preventDefault();
        $('.jcrop-holder').remove();
        $('#photofield').show();
        $('#photofield').next('span').show();
        $(this).remove();
        $('#photofield').val('');

    });

    $('#sc').on('click', function() {

        alert($('#x').val()+','+$('#y').val()+','+$('#w').val()+','+$('#h').val());

    });

    $(".other_option").each(function(i) {

        if($(this).val() != 'other') {

            $(this).next('input').hide();

        } else {

            $(this).next('input').show();

        }

    });

    $(document).on("change", "select[name=question[]]", function() {

        if($(this).val() == 'other') {

            $(this).next("input").show();

        } else {

            $(this).next("input").hide();

        }

    });

    $(document).on("change", "input:checkbox[name=fk_rainbow_bridge]", function() {

        if (!$(this).is(':checked')) {

            $('#fk_dob').show();

        } else {

            $('#fk_dob').hide();

        }

    });

    function checkField(field, value) {

        $.post("<?php echo DOMAIN.INCLUDES; ?>ajax/profileForm.php", { fieldName: field, fieldValue: value },
        function(data){
            if(data) {

                $('input[name='+field+'], select[name='+field+'], textarea[name='+field+']').next('span').text(data);
                $('#'+field).removeClass('success').addClass('error');

            } else {

                $('input[name='+field+'], select[name='+field+'], textarea[name='+field+']').next('span').empty();
                $('#'+field).removeClass('error').addClass('success');

            }

        });

    }


    $(document).on("focusout", "input[name=fk_name]", function(){

        checkField('fk_name', $(this).val());

    });

    $(document).on("focusout", "input[name=fk_breed]", function(){

        checkField('fk_breed', $(this).val());

    });

    $(document).on("focusout", "select[name=fk_gender]", function(){

        checkField('fk_gender', $(this).val());

    });

    $(document).on("focusout", "select[name=fk_dob_month]", function(){

        checkField('fk_dob_month', $(this).val());

    });

    $(document).on("focusout", "textarea[name=fk_about]", function(){

        checkField('fk_about', $(this).val());

    });

});
</script>

有什么想法吗？

Answer 1

将一些数据发布到服务器时，您应该对您提供的参数非常小心。如果您使用相同的参数访问相同的服务器路径，那么您的浏览器将缓存响应（默认情况下）并将填充具有相同请求参数的第一个响应。我自己正在使用类似以下内容以确保每个请求都是唯一的..并且不会应用缓存..

$.post("<your server path url>",
{
    random_number: Math.random()
});

jquery表单插件提交问题

1 个答案: