使用 Play 框架处理文件

Question

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

控制器

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 上传文件的请求； - 从服务器端 - 接收文件，执行任何需要的操作和 return 文件的 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*/)}
      }

使用 Play 框架处理文件

File handling using Play framework

ajax

jquery

scala

playframework-2.0