表单 附件上传 前端 后端 处理

//表单元素前端铺排
                //表单元素前端铺排
                <form action="" id="shenbao" name="shenbao" method="post" enctype="multipart/form-data">
                    请上传身图片：<input type="file" id="file" name="file" onChange="doHandle()" 
                        accept="image/jpg,image/jpeg,image/png,image/PNG">
                </form>
    

function doHandle() {
    //预览即将上传的图片
    //FileReader作为文件API的重要成员用于读取文件，
    //根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型
    var reads = new FileReader();
    f = document.getElementById('file').files[0];
    reads.readAsDataURL(f);//将文件读取为 DataURL
    reads.onload = function(e) {
        document.getElementById('imgdemo').src = this.result;
        $("#imgdemo").css("display", "block");
    };

    var formData = new FormData($("#shenbao")[0]);
    $.ajax({
        url: '${ctx }/service/handle/img',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(returndata) {
            if (returndata.state == "1") {
                // alert(returndata.data);
                var result = $("#result");
                result.show();
                result.val(returndata.data);
            } else {
                alert("失败");
            }

        },
        error: function(returndata) {
            alert(returndata);
        }
    });
}

//后端处理

@RequestMapping(value="/handle/img")
    public void sfzing(HttpServletRequest request, HttpServletResponse response){    
        JSONObject json = new JSONObject();
        json.put("state", 1);
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
        Iterator<String> iter = multipartRequest.getFileNames();
        while (iter.hasNext()) {
            MultipartFile file = multipartRequest.getFile(iter.next().toString());
            try {
                InputStream input = file.getInputStream();

                //处理代码

               res = 处理结果。
                json.put("data", res);
                json.put("state", 2);
             //结果返回页面JSON返回            
            }catch (Exception e) {
                e.printStackTrace();
            }        
            break;
        }
    }

 

备注：关于js中FileReader()的用法：https://blog.csdn.net/xianweizuo/article/details/88911364