如何使用 Play Framework 和 jQuery 上传和显示文件？

Question

我有一种情况：我正在使用 https://www.playframework.com/documentation/2.0/JavaFileUpload 在某个服务器位置上传一个文件，

//上传文件：

<input type="file" name="fileUpload">
<input type="submit" value="Upload">

从下面的代码中，我正在上传上面上传的文件并在我的视图页面上获取/显示它（点击提交按钮后）：

<input type="file" id="inputfile">
<input type="button" value="Submit" id="submitfile">

jQuery:

$("#submitfile").click(function(){
    var path1 =$('input[type=file]').val().replace(/C:\\fakepath\\/i, '');//uploaded file names 
    //adding the Play framework server path for Application to get the image(s) file(s) path
    var filespath = '/files/images/'+path1;//giving my uploaded files path here

    });

但我的要求是：我只需要一种类型：在服务器位置接受/上传文件并在我的视图页面上从服务器位置返回/显示相同的文件路径？我正在为此而奋斗。请帮帮我。

Answer 1

这看起来与33163555 类似。该问题有以下示例：

编辑： 参考 2320069 以获得对 ajax 文件上传和替代方案的支持：

FormData 支持从以下桌面浏览器版本开始。 IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form enctype="multipart/form-data">
  <input type="file" id="file" name="file" />
  <input type="submit" id="submit" name="" value="Upload" />
</form>

<script>
$('#submit').click(function (event) {
   event.preventDefault();
   var file = $('#file').get(0).files[0];
   var formData = new FormData();
   formData.append('file', file);
   $.ajax({
       url: 'upload',
       data: formData,
       type: 'POST',
       contentType: false,
       processData: false,
       beforeSend: function (data) {
         alert('Are you sure you want to upload document?');
       },
       success: function (data) {
         //call your jQuery action here
         alert('Upload completed: ' + data);
       },
       error: function (jqXHR, textStatus, errorThrown) {
         alert(textStatus + ': ' + errorThrown);
       }
    });
    return false;
});
</script>

在您的路线中，您有：

POST /upload controllers.Application.upload()

您的控制器方法返回文件路径的位置：

public static Result upload() {
  MultipartFormData body = request().body().asMultipartFormData();
  FilePart fileP = body.getFile("file");
  if (fileP != null) {
    File file = fileP.getFile();
    //If we want to move from temp
    //FileUtils.moveFile(file.getCanonicalPath(), "FileB"); 
    return ok(file.getCanonicalPath());
  } else {
    return badRequest("Upload Error");    
  }
}

您可以在 ajax 成功回调中执行自定义 jQuery 操作