Question

我有一个Ajax表单，我需要在用户选择图像后立即提交。问题是表单没有提交。如有任何指导，将不胜感激

- 表格---

<form id="bgimageform" method="post" enctype="multipart/form-data" action="process.php">
    <div class="uploadFile timelineUploadBG">
        <input type="hidden" name = "bkg" value = "1"/>
        <input type="file" name="photoimg" id="bgphotoimg" class="custom-file-input">

    </div>

</form>

--- JS代码---

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="js/jquery.wallform.js"></script>
<script>
$(document).ready(function() {

  /* Uploading Profile BackGround Image */
  $('body').on('change','#bgphotoimg', function() {

    $("#bgimageform").ajaxForm({target:'#timelineBackground'}).submit();

  });
});
</script>

Answer 1

你说得对，第一次尝试就没了。

无论如何，我已经进行了一些测试，看起来如果这样做，它就可以了。

$('body').on('change','#bgphotoimg', function() {
    alert("It should have submitted.");
});

这是展示它的小提琴。 http://jsfiddle.net/gt9e160f/

所以我必须指出你的提交方法，因为肯定会改变on。

我之前从未使用过jquery.form.js，但是从他们的文档中我已经把它拉了下来：

$(function(){

    //bind the form's submit to ajaxForm
    $("body").on('submit', '#bgimageform', function(e){
        $(this).ajaxForm({target:'#timelineBackground'});
        e.preventDefault();
        return false;
    });

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

Answer 2

试试这个

 $("body").on('change','input#bgphotoimg', function() {
   $('#bgimageform').submit(AjaxCall);
});
function AjaxCall(){
  // ajax call here 
  $.ajax({
    type: "POST",
    url: "url",
    data: {},
    success: function(data) {
        // code here 
        console.log(data);
    }
  });
  return false; 
 }

在变更时提交Ajaxform

2 个答案: