两种方式

springMVC-input

这种方式是使用 type 为 file 的 input 组件，在后端使用 spring 的 CommonsMultipartResolver 对象，以流的方式将图片读到写到服务器的硬盘中或者数据库中，在本文中，笔者是将图片写到了服务器的硬盘中。使用这种方式，有个 BUG ，如果想一次上传多张张图片，那只能使用 input 一次选择多张图片。

springMVC-base64

这种方式，首先将图片转换成 base64 编码，然后以文本的方式，传给后台。这种方式需要前端转码，后台程序接收图片后，在进行解码，还有一点，由于图片的体积较大，所以最好是以 post 类型的 ajax 上传到后台。不过好的一点是可以转码后的 base64 的编码字符串保存到一个数组变量中，这样就避免 springMVC-input 上传多张图片的 BUG。

上码

springMVC-input

前端代码：

<!-- input 组件-->
<input name ="fileImg" multiple="multiple" type="file" id="files" /></div>

<!-- 使用 ajaxfileupload 工具上传图片-->
 $.ajaxFileUpload ( {
                    url: '/image/upload', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'fileImg', //文件上传域的ID
                    dataType: 'json', //返回值类型
                    success: function (data, status)  //服务器成功响应处理函数{
                        $("#img1").attr("src", data.imgurl);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数{
                        alert(e);
                    }
                }
            )
            return false;
        }

后台的代码

TODO

后来

后来遇到了 springMVC 上传大小的限制，在网上查了很久，大多数的说法是将 springMVC 的
maxUploadSize 数设置大些，没有用。最后的解决方案是使用 H5 中的 canvs 工具将图片降质，然后没选择一次照片立刻将图片上传。最后是要开了 springMVC 的上传大小的限制。