Play框架文件上传Upload、FileUpload类使用详解

最近做一个前后台分离的项目,要用到前端页面传递文件对象给后端,就研究了一下框架中自带的类Upload接口、FileUpload类。

1. 后端的控制器能够接收到play.mvc.Http.Request对象,这个对象中有一个args参数,args参数内还内嵌一个__UPLOADS属性,我们可以通过这样的关系获取文件对象
    private static Map<String, File> getRequestFileParam(Request request){
        Map<String, File> files = Maps.newHashMap();
        Map<String, Object> paramMap = request.args;
        if(!paramMap.isEmpty()) {
            List<Upload> uploads = (List<Upload>)paramMap.get("__UPLOADS");
            for(Upload upload : uploads) {
                if (upload instanceof FileUpload) {
                    FileUpload mem = (FileUpload)upload;
                    File file = upload.asFile();
                    files.put(mem.getFieldName(), file);
                }
            }
        }
        return files;
    }

上面的示例通过play自带的功能获取前端传递过来的多个文件对象,我们可以通过自己的需求做不同的改造定制开发。

2. 使用play框架在控制器中接收文件对象的方法我们上面已经学习到了,下面就记录一下前端页面如何传递文件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="" id="formData" enctype="multipart/form-data">
        <input type="file" name="files" value="文件上传" id="file">
        <input type="file" name="files1" value="文件上传" id="file1">
        <input type="button" value="上传" id="upload">
    </form>
    <script src="/js/jquery.js"></script>
    <script type="text/javascript">
    $(document).on('click',"#upload", function(){
//      var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
        var formData = new FormData($("#formData")[0]);
//      console.log({'file':$('#file').get(0).files[0]});
//      var ff = {'file':$('#file').get(0).files[0]};
//      var ff1 = {'file1':$('#file1').get(0).files[0]};
//      formData.append("files",  ff)
//      formData.append("file1",  ff1)
        $.ajax({
            url : '/api/ggmsg/msg/action/FileUploadAction',
            type : 'post',
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false,
            dataType : 'json',
            data:formData,
            success : function(data) {
                console.log(data)
            },
            error: function (data) {
            }   
        }); 
    });
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/yaomingyang/article/details/81037082