2017-01-06 13 views
0

ファイルを含むフォームをサーバーにアップロードしています。サーバーに検証を実行し、成功または失敗を返します。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(); 
}); 
+0

コンソールにメッセージが表示されていませんか? [ネットワーク]タブを確認します。POSTリクエストが表示されますか?それはどのようなステータスですか? – Quentin

+0

コンソールエラーは表示されません。通話は[ネットワーク]タブに表示されます。 200の返答を返します。私は、サーバーが要求を受け取り、ファイルとは別にデータを受け取るので、これが真実であることを知っています。 [ネットワーク]タブにアップロードを表示する方法はありますか? –

答えて

-1

あなたのコードは、テストサーバー上で動作している場合は、単にフォルダのアクセス許可とフォルダの場所を確認してください。許可は777である必要があります。

ありがとう

+0

うわー、まず、これをスキミングする人のために。 777何も決してすべきではありません。第2に、ファイルはPOSTで受信されないため、許可エラーは発生しません。 –

関連する問題