1

ページを離れたり、 を使用してmultipart/form-dataリロードしたりせずにフォームを送信したい。PHPのみで送信すると、うまく機能しますが、ページを離れます。jQueryAJAX

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;
    });
});

どんな助けでも大歓迎です。前もって感謝します。:)

4

4 に答える 4

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);
        }

    });

});
于 2013-07-02T22:46:11.557 に答える
0

使用してみてくださいpreventDefault：

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

または「.myform」の代わりに「送信ボタン」を使用します。

$('#sumit').click(function(event){
    event.preventDefault();
    ...
于 2013-07-02T21:51:42.877 に答える
0

フォームのデータをシリアル化する必要があります。

また、 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' はデータを送信しませんか?

于 2013-07-02T21:53:01.207 に答える