如何使用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屋!