如何在不离开我的页面的情况下使用 jQuery、Ajax 将表单提交到其他页面 [重复]

Question

我想提交multipart/form-data 表单而不离开我的页面或使用jQuery 和AJAX 重新加载。当我只用 PHP 提交它时，它做得很好但离开了页面。

HTML：

<form  action="" id="myform" method="POST" class="myform" enctype="multipart/form-data">
<input type="file" id="image" name="file">
<input  border="4" type="submit" value="submit"  id="sumit" name="submit"  class="button" />

jQuery:

$(function() {
   $('.myform').submit( function() {
        $.ajax({
             url    : 'c_create.php',
            type    : 'POST',
            data    : formdata(),       
            success : function( data ) {
                         alert('ok');       
                      },
            error   : function(){
                         alert('error');
                      } 
        });

        return false;
    });
});

任何帮助将不胜感激。提前致谢。 :)

Answer 1

我建议使用插件，因为上传过程非常混乱。尤其是不同的浏览器有细微的差别，这使得代码更新和维护变得困难。我已经测试了https://github.com/Widen/fine-uploader 并且效果很好。

$(function() {
    var uploader = new qq.FineUploader({

        element : $('#selectImportFile')[0],
        request: {
            // path to server-side upload script
            // url of the server-side upload script, should be on the same 
            endpoint : 'api/docs',
            // additional data to send, name-value pairs
            params : {}
        },
        // validation    
        validation: {
            // ex. ['jpg', 'jpeg', 'png', 'gif'] or []
            allowedExtensions : [ 'xlsx', 'docx' ],
            // each file size limit in bytes
            // this option isn't supported in all browsers
            sizeLimit : 0, // max size   
            minSizeLimit : 0, // min size
        },
        // set to true to output server response to console
        debug : true,

        // events
        callbacks: {
            // you can return false to abort submit
            onSubmit : function(id, fileName) {
                qq.log('submit');
            },
            onProgress : function(id, fileName, loaded, total) {
                qq.log('onprogress');
            },
            onComplete : function(id, fileName, responseJSON) {
                qq.log('completed');
                qq.log('id: ' + id);
                qq.log('fileName: ' + fileName);
                qq.log('responseJSON: ' + responseJSON);
            },
            onCancel : function(id, fileName) {
            },
            onError : function(id, fileName, xhr) {
                qq.log('error');
            }
        },
        showMessage : function(message) {
            qq.log('Server error: ' + message);
        }

    });

});

Answer 2

尝试使用preventDefault:

$(function(){
   $('.myform').submit( function(event) {
      event.preventDefault();
      ....

或使用“提交按钮”而不是“.myform”：

$('#sumit').click(function(event){
    event.preventDefault();
    ...

Answer 3

你要序列化表单的数据，

并且还做一个 preventDefault()，所以提交按钮实际上并没有重新加载。

$(function(){

  $('.myform').submit( function(e) {
    e.preventDefault();
    var formData = $(this).serialize(); 
    $.ajax({
         url    : 'c_create.php',
        type    : 'POST',
        cache: false,
        contentType: 'multipart/form-data',
        data    : formData,       
        success : function( data ) {
                     alert('ok');       
                  },
        error   : function(){
                     alert('error');
                  } 
    });

    return false;
});
});

虽然多部分表单使用 ajax 可能有点棘手。

这里有一些关于此事的进一步帮助......

jQuery AJAX 'multipart/form-data' Not Sending Data?

Answer 4

也就是说$.ajax();不能提交multipart/form-data只会提交数据不提交文件，你可以试试dojo.form.uploader。