2012-04-21 14 views
1

このスクリプトは動作しません。ファイルを送信するたびに、スクリプトは1つのAjaxリクエストを行い、サーバーにファイルを送信する必要がありますが、空の文字列を常にシリアル化します。jQuery serialize()always empty

私のJavascriptの

$('#upload-button input:file').change(function() { 
    $('#upload-text').text('Sending file...'); 

    $.ajax({ 
     type: "GET", 
     url: "?url=images/send", 
     data: $('#image-upload').serialize(), 

     success: function(response) { 
      if(response.error) { 
       $('#upload-text').text(response.error); 
      } else if(response.success) { 
       $('#upload-text').text('Image send'); 
      } 
     }, 
    }); 
}) 

私のHTML私はalert($('#image-upload').serialize());に起因する、ファイルを選択した

<form name="image-upload" id="image-upload" action="?url=imagens/enviar" method="post" enctype="multipart/form-data"> 
    <input type="file" name="selected-image" id="upload-hidden" value="" /> 
</form> 

// EMPTY // 

結果alert($('#image-upload input:file').attr('value'))から:

ponte-vecchio.jpg 
+1

jQueryでajax経由でファイルのようなマルチパートデータを送信することはできないと思います...現代のブラウザではHTML5でこれを行うことができます...むしろ、iframeにファイルを送信し、そのiframe –

答えて

1

jQuery form pluginを使用してください。 HTML5ファイルのアップロードをサポートしており、ブラウザが古すぎる場合は隠れたiframeにフォールバックすることができます。

2

ファイルを送信する場合は、hereと記載されているiframe - 「回避策」を実行する必要があります。

あなたの問題のために、なぜserializeが常に空であるかは、jqueryのソースを見てください。あなたがタイプ「ファイル」を見ることができるように入力フィールドのタイプは、この正規表現

/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i 

に対してテストされることの一部ではないので、jQueryのは、入力フィールドのこの種をシリアル化しません。

+0

+1良いリソース –

1

checkout this fiddle。それはiframeを介してアップロードを使用するjQuery経由で基本的なhtmlとJSを設定します。ファイルを非同期にアップロードするのに便利です);