Обработка файлов с использованием Play Framework - PullRequest
Новая
       9

Обработка файлов с использованием Play Framework

0 голосов
/ 31 декабря 2018

Мне нужно загрузить файл со стороны клиента и манипулировать им на стороне сервера.После манипуляции It (файл) должен отображаться на одной и той же веб-странице без перезагрузки всей страницы.Я использую Scala в Play Framework 2.X, с отдельными html, js-скриптами.Типы файлов - .txt .xml .html

и т. Д.

Я уже пробовал использовать формы и загрузил файл.Манипулированный вывод отображается на следующей странице.

Редактировать: 1

HTML 

<form class = "class1" id="myForm1" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" size="60" id= "fileUpload1" name="fileUpload1">
    <input type="submit" id ="ajaxCallUpload1" value="Validate">
</form>

JS 

var form = document.getElementById('fileUpload1');
var uploadButton = document.getElementById('ajaxCallUpload1');
var outputMessage = document.getElementById('message1');

form.onsubmit = function(event){
event.preventDefault();
uploadButton.innerHTML= "Uploading.... "
}
var formdata = new FormData();
formdata.append('file',form)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);
    }
}
xhr.open('POST','/upload',true);
xhr.onload = function(){
if (xhr.status === 200){
uploadButton.innerHTML = 'Uploaded';
}
else{
alert('An error occurred!')
}
};
xhr.send(formdata)

Контроллер 

def upload = Action(parse.multipartFormData) { request =>
    request.body.file("fileUpload1").map { file =>
    //file manupulation
  Ok( output response)
    }.getOrElse {
      Ok("Error during uploading")
  }}

Я получаю ошибку вform.onsubmit () и вывод будет error-Error во время загрузки (когда страница загружается).После загрузки файла я получаю вывод на другой странице.

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Спасибо за помощь @aleck.Я разобрался и все заработало отлично.

HTML 

<code>    <form id="myForm" >
        <input  type="file" size="60" id ="fileUpload" name="fileUpload">
        <input type="button" id ="ajaxCallUpload2" onclick= "extract(this)" value="Extract">
    </form>

 <div id="response" ><pre id="message">

JS 

function extract(){
$("#message").empty();
var file = $("#fileUpload").get(0).files[0];
var formData = new FormData();
formData.append('file',file);
console.log("file appended")
$.ajax({
        url: '/extract',
        type: 'POST',
        data:  formData,
        processData: false,
        contentType: false,
        success: function (data) {
        console.log(data)
        document.getElementById("message").innerHTML=data;
        },
        error: function () {
        document.getElementById("message").innerHTML="Oops! Invalid file.";
        }
    });
}

Контроллер 

def extract = Action(parse.multipartFormData) { request =>
    val file = request.body.file("file").get
      //manipulation
        Ok(/*manipulated result*/)}
      }
0 голосов
/ 31 декабря 2018

Вы должны сделать: - со стороны клиента - почтовый запрос Ajax для загрузки файла;- со стороны сервера - получить файл, сделать все необходимое и вернуть URL файла;- со стороны клиента - при ответе - используйте ответ сервера (URL), чтобы показать файл так, как вы хотите.

...