私はいくつかの入力と他のフィールドを持つフォームを持っています。jQuery ajax、入力ファイルとJsonでフォームを送信
私は保存ボタンを持っている、と私はクリックしたときに、私はjQueryを使ってAjaxでフォームを送信します。
$.ajax({
type: "POST",
dataType: "json",
url: $('#ajaxUrl').val(),
data: "action=save&" + form.serialize()
});
ので、私は、テキストのような単純な入力を持っているとき、などを選択...それは大丈夫です。しかし、入力ファイルがある場合は、ファイルを取得できません。 $ _FILESは常に空です。
どうすれば簡単に行うことができますか？
編集：私は、プラグインを使用する必要はありません:)
私はupload filesに能力を持っているこのjQuery pluginを使用しました。
HTML：
<form action="file-echo2.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"><br>
<input type="submit" value="Upload File to Server">
</form>
Javascrtipt：
$('form').ajaxForm({
beforeSend: function() {
},
uploadProgress: function(event, position, total, percentComplete) {
},
success: function() {
},
complete: function(xhr) {
}
});
streetpcの答え+1と同じコメントを言います。 –
form.serializeは、ファイル入力を管理しません。 adeneoが示唆するようにXMLHttpRequestをformDataにする必要があります。example usage hereを参照してください。古いブラウザの場合、iframeを使用し、iframeをターゲットとしてフォームをポストするソリューションがあります。いくつかのjqueryプラグインは、例えばJQuery-File-Uploadのようにあなたのためにすべてを行います（しかし他にもたくさんのプラグインが存在します）。
IE10でformDataをサポートしています。そのため、古いブラウザをサポートするためにiframeを使用するプラグインを使用することをお勧めします。 +1 –
ええ、私の問題は、私はカスタムCMSで動作します。新しいコンテンツを保存するための関数は既に書かれています。このスクリプトを編集してすべてを書き直すことはできません... ^^ –
古いブラウザのサポートを中止できる場合は、formDataを使用するようにスクリプトを編集するだけです。もしあなたが（IE 8＆9を落とすことはかなり激しい）できないなら、もう少し進む必要があるのではないかと心配しています。しかし、いくつかのプラグインは、すべての重い持ち上げを行うので、それほど複雑ではありません。 –
Googleで「Using FormData Objects」を照会すると、little "vanilla" frameworkが見つかりました。あなたにconsole.log場合は、ちょうどあなたがサーバーに送信されたデータを見ることができました（）
function ajaxSuccess(){/*here*/}
にajaxSuccessの応答を変更
AJAXSubmit(myForm);
：
はで使用されます。それはsubmittedDataプロパティ上にあります。 ASP.NET MVCのための
実装：
フォームラッパーを作り始めるために：
<form id="inputform">
<input class="hide" type="file" name="file" id="file" />
</form>
Сreate送信するためのクライアント・ハンドラ：
$("#yourButton").bind('click', function() {
var data = new window.FormData($('#inputform')[0]);
$.ajax({
xhr: function() {
return $.ajaxSettings.xhr();
},
type: "POST",
data: data,
cache: false,
contentType: false,
processData: false,
url: "@Url.Action("MethodName", "ControllerName")",
success: function() { },
error: function() { },
});
});
は、サーバー上のハンドラを実行します。側（コントローラ）：
public ActionResult MethodName(HttpPostedFileWrapper file) {
var img = Image.FromStream(file.InputStream);
....
return ..;
}
これはあなたの時間を節約するのに役立ちます）
[formData]（https://developer.mozilla.org/en-US/docs/Web/API/FormData）を使用してください！ – adeneo
[jQueryと非同期にファイルをアップロードするにはどうすればよいですか？]（http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery） – Martijn
@ClémentAndraud、これがあなたを助けるかどうかは確かですが、http：//wordpress.stackexchangeをご覧ください。com/questions/71170/how-do-i-upload-import-form-input-files-via-ajax-function いくつか考えられます。 –