ファイルを含むフォームをサーバーにアップロードしています。サーバーに検証を実行し、成功または失敗を返します。FormDataを使用してサーバーでファイルを受信できません
フォームはAjaxとFormDataを使用して送信されます。
私のテストサーバーでは、ファイルを含むすべてのデータが受信されます。しかし、私のライブサーバーでは、このファイルが見つからないと返します。
両方の環境でFormDataオブジェクトを調べて、そのファイルが存在する場合、サーバーに送信することはできません。
明らかに私はいくつかの項目を削除して*に置き換えました。また、投稿URLはページによって生成されています。
HTML:
<form method="POST" action="https://******" accept-charset="UTF-8" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6">
<div class="form-group" id="sport_types">
<label for="match">What match is this video from</label>
<select id="event_select" name="match" class="form-control">
<option value="">Select Match</option>
<option value="9024802136436009">Rugby Newers</option>
</select>
</div>
<div class="form-group">
<label for="video">Choose your video</label><br>
<div class="fileUpload btn btn-info">
<span id="upload_text">Choose Video</span>
<input id="imageLoader" accept="video/*" type="file" name="video">
</div>
<div id="fileName"></div>
</div>
<div class="form-group">
<label for="video_name">Enter a short description of the video</label>
<input name="video_name" type="text" class="form-control" placeholder="Video Description" value="">
</div>
<input type="hidden" name="video_id" value="0">
</div>
</div>
<div id="form_buttons_image">
<a class="btn btn-default" href="/video/1451290748440885">Cancel</a>
<input id="submit" type="submit" class="btn btn-info hidden ">
<span id="uploading_feedback" class="hidden">Uploading Video...</span>
</div>
<div class="row">
<div class="col-md-6">
<div class="progress hidden">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span id="progress_label">0%</span>
</div>
</div>
</div>
</div>
</form>
Javascriptを:
$('form').submit(function(e) {
formData = new FormData(this);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded/evt.total;
percentComplete = parseInt(percentComplete * 100);
percentShown = percentComplete*0.98;
showProgress(percentShown);
}
}, false);
return xhr;
},
url: '{{Request::url()}}/process',
type: 'POST',
data: formData,
processData: false,
contentType: false
}).done(function(data) {
if (data[0] == 0) {
console.log(data[1][0]);
console.log(data[2]);
$('#feedback').html(data[1][0]).removeClass("hidden");
$('#key_video').removeClass("hidden");
$("#uploading_feedback").addClass("hidden");
$(".progress").addClass("hidden");
}
else if (data[0] == 1) {
window.location.assign(data[1]);
}
});
e.preventDefault();
});
コンソールにメッセージが表示されていませんか? [ネットワーク]タブを確認します。POSTリクエストが表示されますか?それはどのようなステータスですか? – Quentin
コンソールエラーは表示されません。通話は[ネットワーク]タブに表示されます。 200の返答を返します。私は、サーバーが要求を受け取り、ファイルとは別にデータを受け取るので、これが真実であることを知っています。 [ネットワーク]タブにアップロードを表示する方法はありますか? –