使用Play框架处理文件

Question

我需要从客户端上传文件并在服务器端操作它。在操作之后，It（文件）必须显示在同一网页中而不重新加载整个页面。我在Play framework 2.X中使用Scala，使用单独的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（）中收到错误，输出是alert - 上传时错误（页面加载时）。上传文件后，我将在另一页中输出。

Answer 1

您必须这样做： - 从客户端 - 上传文件的Ajax发布请求; - 从服务器端 - 接收文件，执行任何操作并返回文件的URL; - 从客户端 - 响应 - 使用服务器响应（URL）显示您想要的文件。

Answer 2

谢谢你的帮助@aleck。我想通了，它完美无缺。

HTML

    <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"></pre></div>
</div>

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*/)}
      }