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

Question

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

//上传文件:

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

从下面的代码中，我正在上传上面上传的文件并在我的 View 页面上获取/显示它(点击提交按钮后):

<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

    });

但我的要求是:我只需要一种类型，它可以同时执行以下两种操作:在服务器位置接受/上传文件并在我的 View 页面上从服务器位置返回/显示相同的文件路径？我正在为之奋斗。请帮助我。

Answer 1

这看起来像是与 33163555 类似的问题.该问题有以下示例:

编辑:引用2320069支持 ajax 文件上传和替代:

FormData support starts from following desktop browsers versions. 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>

在你的 route 你有:

POST /upload controllers.Application.upload()

您的 Controller 方法返回文件路径的地方:

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 操作