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。

如何使用jQuery，Ajax将表单提交到其他页面而不离开我的页面

4 个答案: