jquery - 使用 Play 框架处理文件

Question

我需要从客户端上传文件并在服务器端操作它。操作后，它(文件)必须显示在同一网页中，而无需重新加载整个页面。我在 Play 框架 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)

Controller

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

我在 form.onsubmit() 中遇到错误，并且输出是在上传期间(当页面加载时)警报错误。上传文件后，我在另一个页面中得到输出。

Answer 1

你必须做:- 从客户端 - Ajax post 请求上传文件；- 从服务器端 - 接收文件，执行所需的操作并返回文件的 URL；- 从客户端 - 响应时 - 使用服务器响应(URL)来显示您想要的文件。