如何在Play Framework 2.1。*中使用Ajax

Question

我正在使用play framework 2.1.2 。 我想在play framework使用Ajax 。

我在做什么？ 我正在上传多个文件，并且我希望如果用户没有选择要上传的文件，那么我希望收到一些消息，例如“ u没有选择任何文件”进行上传，如果用户选择要上传的文件并单击该时间，我希望出现一些消息，例如文件已上传

我的观点是：

@form(action = routes.upload.up, 'enctype -> "multipart/form-data",'_id->"he") {
            <input type="file" name="file" accept="application/pdf" multiple="multiple"><br/> 
            <input type="submit" id="if" value="upload and extract"> 

            }

并获取数据。

现在，当用户单击“上传”按钮时，如果用户选择了文件上传后的那段时间，我想打印消息文件已经上传 ，如果用户当时没有选择文件，我想显示消息，请选择一个文件 。

我想发送在控制器部分进行文件处理后将发送的消息数据。 我要发送到该Ajax的那个控制器部分之后，我会收到什么消息。

控制器部分是：

Http.MultipartFormData body = request().body().asMultipartFormData();
        List<FilePart> resourceFiles = body.getFiles();


        if (!resourceFiles.isEmpty()) {

            for (FilePart upload : resourceFiles) {

                String targetPath = "/home/rahul/Documents/upload/"
                        + upload.getFilename();
                upload.getFile().renameTo(new File(targetPath));
            }
            return ok("File uploaded ");  //i want to print this result as a message 
        } else {
            return forbidden(); 
        }
    }

我经历了一些代码，但没有得到足够的解决方案。

给我一些想法，以通过ajax。

Answer 1

几周前，我实现了使用jquery-file-upload使用ajax上传文件。 我可能会发布我的解决方案，希望您会满意。 此示例仅用于简单的1个文件上传，但可以扩展。

剧本

<script src="@routes.Assets.at("javascripts/jquery-file-upload/jquery.iframe-transport.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/jquery-file-upload/vendor/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/jquery-file-upload/jquery.fileupload.js")" type="text/javascript"></script>

视图

<input type="file" id="@d" name="@d" data-url="@code.routes.Ext.upload()"  />
<script type="text/javascript">
    $(document).ready(function () {
        $('#@d').fileupload({
            replaceFileInput: true,
            done: function (e, data) {
                //Here you got server response.
                console.log(data);
                var d = data.result;
                alert(d);
                $('#img1').attr("src",d);
            }
        });
    });
</script>

@d是您的视图参数。

控制者

在您的代码中，您可以使用return ok("File uploaded ")来响应客户端。

完整的源代码可以在此处（Scala） ， 此处 ， 此处和此处找到