java - Play Framework - Ajax web service call image request issue -
i have developed web service using play framework. have created post rest service in play framework below.
in routes file:
post /imageupload controllers.application.imageupload()
in application.java:
public static result imageupload() { objectnode result = json.newobject(); multipartformdata body = request().body().asmultipartformdata(); filepart file = body.getfile("file"); file trainimg = file.getfile(); file temp = new file("/play_framework/temp.jpg"); trainimg.renameto(temp);// moved image folder check correct image. . . . return ok(result); }
in service, have written code save image received request. have called service ajax given below.
in index.html file:
var formdata = new formdata(); var blob = new blob([imagedata], { type: "image/jpg"}); formdata.append("file", blob, "capturedimage.jpg"); $.ajax({ url: 'http://localhost:9000/imageupload', data: formdata, crossdomain: true, processdata: false, contenttype: false, async: false, cache: false, datatype: "json", type: 'post', success: function(data){ alert(data); var responsestr = json.stringify(data); alert("response str -- "+responsestr); } });
when upload file multipart form data, can receive multipart data in server side. stored "multipartbody7906599875117091855astemporaryfile".
if file's mimitype - "content/unknown".
when debug, got below multipart form data path "/var/folders/f3/r3rfqfl949z5pf2cprwn95dm0000gn/t/multipartbody7906599875117091855astemporaryfile".
how parse "jpg" file? can me this?
the following worked me:
application.java
public class application extends controller { public static result index() { return ok(index.render("so answer 30229421")); } public static result imageupload() { objectnode result = json.newobject(); http.multipartformdata body = request().body().asmultipartformdata(); http.multipartformdata.filepart file = body.getfile("file"); file trainimg = file.getfile(); file temp = new file("/tmp/temp.jpg"); trainimg.renameto(temp); // moved image folder check correct image. result.put("path", temp.getabsolutepath()); return ok(result); } public static result imagedownload(string path) { return ok(new file(path)); }
index.scala.html
@(message: string) <html> <body> <h1>@message</h1> <input type="file" id="imagedata"/> <button onclick="send()">send image</button> <div id="image"> </div> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> function send() { var imagedata = $('#imagedata')[0].files[0]; var formdata = new formdata(); var blob = new blob([imagedata], { type: "image/jpg"}); formdata.append("file", blob, "capturedimage.jpg"); $.ajax({ url: 'http://localhost:9000/imageupload', data: formdata, crossdomain: true, processdata: false, contenttype: false, async: false, cache: false, datatype: "json", type: 'post', success: function(data){ $('#image').html('<img src="http://localhost:9000/imagedownload?path=' + data.path + '"/>'); } }); } </script> </body> </html>
the difference, because didn't include how imagedata
value, used version (as per so answer):
var imagedata = $('#imagedata')[0].files[0];
Comments
Post a Comment