如何使用Play Framework和jQuery上传和显示文件？ [英] How to Upload and Display File Using Play Framework and jQuery?

问题描述

我有一个场景：我使用以下方式在某个服务器位置上传一个文件： https：// www.playframework.com/documentation/2.0/JavaFileUpload ，

//上传文件：

 < input type =filename =fileUpload> 
< input type =submitvalue =上传> 
  

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

 < input type =fileid =inputfile> 
< input type =buttonvalue =Submitid =submitfile> 
  

jQuery：

  $（＃submitfile）。click（function（）{
 var path1 = $（'input [type = file]'）。val（）。replace（/ C：\\\ \\ fakepath \\ / i，''）; //上传的文件名
 //添加应用程序的Play框架服务器路径以获取映像文件路径
 var filespath ='/ files / images /'+ path1; //给我上传的文件路径
 
}）; 
  

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

解决方案

这看起来类似于 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 =fileid =filename =file/> 
< input type =submitid =submitname =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：form数据，
类型：'POST'，
 contentType：false，
 processData：false，
 beforeSend：function（data）{
 alert （'你确定要上传文件吗？'）; 
}，
成功：function（data）{
 //在这里调用你的jQuery动作
 alert（'Upload已完成：'+ data）; 
}，
错误：函数（jqXHR，textStatus，errorThrown）{
 alert（textStatus +'：'+ errorThrown）; 
} 
}）; 
返回false; 
}）; 
< / script> 
  

您的路线中有：

  POST / upload controllers.Application.upload（）
  

控制器方法返回文件路径：

  public static Result（）{
 MultipartFormData body = request（）。body ）.asMultipartFormData（）; 
 FilePart fileP = body.getFile（file）; 
 if（fileP！= null）{
 File file = fileP.getFile（）; 
 //如果我们想从temp 
 //FileUtils.moveFile（file.getCanonicalPath（），FileB）; 
 return ok（file.getCanonicalPath（））; 
} else {
 return badRequest（Upload Error）; 
 
 
 
 
 
 
 $ b你可以在ajax中执行你自定义的jQuery动作成功回调
 
I have one scenario: I am uploading one file at some server location using: https://www.playframework.com/documentation/2.0/JavaFileUpload ,  

//Uploading file:
<input type="file" name="fileUpload">
<input type="submit" value="Upload">
And from the below code, I am uploading the above uploaded file and getting/displaying it on my view page like(After clicking the Submit button):
<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

    });
But my requirement is that: I need only one  type which does both: accepts/uploads the file at server location and returns/displays the same file path from server location on my view page ? I am struggling for it. Please help me.
解决方案
This looks like a similar issue to 33163555. That question has the following example:

Edit: Reference 2320069 for support on ajax file uploads & alternatives: 

  
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>
In your routes you have:
POST /upload controllers.Application.upload()
Where your controller method returns the filepath:
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");    
  }
}
And you can perform your custom jQuery action in the ajax success callback

                        
这篇关于如何使用Play Framework和jQuery上传和显示文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！