Отправить входной файл на стороне сервера в javascript

Question

Я хочу загрузить выбранный на стороне клиента и передать его на серверную сторону для загрузки.

На стороне сервера у меня есть служба отдыха, которая обрабатывает многостраничные POST по адресу URL/uploadFile.

На стороне сервера я использую этот элемент:

<form method="POST" enctype="multipart/form-data" id="fom" action="/uploadFile"> 
      File to upload: 
      <input type="file" id="file"><br /> 
      <input type="button" id="upload"> Press here to upload the file! 
      </form> 

И это хорошо работает.

Теперь я хочу, чтобы иметь возможность выбирать файл с клиентской стороны и передавать его на серверную сторону для загрузки.

Так тонный на стороне клиента, у меня есть этот элемент на странице:

<form method="POST" enctype="multipart/form-data" id="fom"> 
     File to upload: 
     <input type="file" id="file"><br /> 
     <input type="button" id="upload"> Press here to upload the file! 
     </form> 

который является в основном то же самое, только без атрибута «действие».

Таким образом, пользователь может выбрать файл через диалоговое окно «Открыть файл ...» в браузере.

Здесь я не знаю, как связать предоставленный файл на стороне клиента с сервисом на стороне сервера. Как я могу вызвать службу, зная, что сервер и стороны клиента не развернуты на одном и том же порту.

Answer 1

Я закончил с использованием AJAX, чтобы иметь возможность сделать это. Получение Ajax для отправки данных файла было немного сложным, поскольку это не настоящее как параметр на сервере URL.

This мне очень помог.

Вот что я использовал:

На странице:

 <form id="fileForm" method="POST" enctype="multipart/form-data"> 
     File to upload: 
     <input type="file" name="file" id="file"><br /> 
     <input type="submit" value="Upload"> Press here to upload the file! 
     </form> 
     <div id="response"></div> 

На JS части:

$("#file").click(function(){ 
    document.getElementById('fileForm').setAttribute("action", URL); 
    } 


    $("#fileForm").submit(function(event){ 
    event.preventDefault(); 
    var formData = new FormData($("#fileForm")[0]); 
    $.ajax({ 
     data: formData, // get the form data 
     type: $("#fileForm").attr('method'), 
     url: $("#fileForm").attr('action'), 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     complete: function(response) { 
      document.getElementById("response").innerHTML = response.responseText; // update the DIV 
     } 
     }); 
    return false; 
    }