私は、ページをリロードせずにファイルをアップロードし、処理し、表示するのに苦労しています。 jqueryでサーバーにファイルを適切に投稿するにはどうすればよいですか？ajaxファイルのアップロード
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data" id="uploadform">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" id="submit" />
</form>
</body>
</html>
アップロードフォームをiframeに入れ、メインウィンドウとフレームをJavaScriptでやりとりすることでできます。それは醜いですが、それはいくつかのブラウザでそれを行う唯一の方法です。
jQuery File Uploadは、非同期XHRアップロードを組み込み、対応していないブラウザの場合はiframeにフォールバックする素晴らしいプラグインです。また、すぐにドラッグ＆ドロップ（対応ブラウザ用）をサポートしています。これは世界で最もシンプルなプラグインではありませんが、努力する価値はありますが、それはすべての基本をカバーしています。
バニラHTMLを使用すると、AJAXリクエストでファイルをアップロードすることはできません。 SWFUploadの行に沿って何かを見てください。複数のファイルをアップロードしたり、ファイルセクションにワイルドカードフィルタを指定したり、アップロード中に進行状況バーやその他のステータス情報を表示することができます。
jquery.upload.jsを使用してページをリロードすることなく、INPUT [type = "file"]を含むフォームをアップロードできます。 $ .Deferred.doneハンドラでは、独自のコードを追加してサーバーの応答を表示できます。
$.upload(form.action, new FormData(myForm))
.progress(function(progressEvent, upload) {
if(progressEvent.lengthComputable) {
var percent = Math.round(progressEvent.loaded * 100/progressEvent.total) + '%';
if(upload) {
console.log(percent + ' uploaded');
} else {
console.log(percent + ' downloaded');
}
}
})
.done(function(data) {
console.log('Finished upload');
// add your code for rendering the server response
// into html here
});
あなたはここでそれを得ることができます：https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/public/lib/ampere/jquery.upload.js
あなたはまだそれを試してみましたか？ – guanome
@guanome：私は彼が試したことを保証します！ –
はい、PHPスクリプトを使ってアップロードできます。しかし、jqueryメソッドを使ってPHPを実行して、応答を取得し、$（＃response）.html（response）のように置き換えても機能しません。それはファイルが決してアップロードされていないように見えます、私は$ _FILE配列でエラーを受け取ります –