一个表单提交数据和上传图片（ssm）

这个是用来记录自己的代码，如果可以帮助到你们那是最好！

这个是基于ssm+easyui 的图片上传，废话不多说了！上代码。

我们先看jsp：

<div id="adddlg" class="easyui-dialog" style="width:400px;height:400px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
    <form id="usercodeform" method="post" enctype="multipart/form-data">
        <div class="fitem">
            <label>用户ID:</label>
            <input id="userId"  name="userId"  required="true" class="easyui-textbox" missingMessage="请填写内容！" style="width:248px;"/>
        </div>
        <div class="fitem">
            <label>Code: </label>
            <input id="userCode"  name="userCode"  required="true" class="easyui-textbox" missingMessage="请填写内容！" style="width:248px;"/>
        </div>
        <div class="fitem">
            <label>二维码:</label>
            <input id="codeUrl" name="codeUrl" accept="image/*" onchange="onupload(this)" type="file" style="width:200px" />
            <div id="xmTanDiv" style="text-align:center;">
                <img id="Img" width="180px" height="180px"/>
            </div>
        </div>
    </form>
           <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="uploadImg()" style="width:90px">新增</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#adddlg').dialog('close')" style="width:90px">关闭</a>
</div>

接下来就是jQuery：

//选择图片，马上预览
    var image = '';
    function onupload(file) {
        if(!file.files || !file.files[0]){
        return;
        }
        var reader = new FileReader();
        //读取文件过程方法
        reader.onload = function (e) {
            document.getElementById('Img').src = e.target.result;
            image = e.target.result;
        }
        reader.readAsDataURL(file.files[0])
    }


    //图片上传
    function uploadImg() {
        var formdata = new FormData($("#usercodeform")[0]);
        $.ajax({
            async: false,
            cache:false,
            url:'usercode/addupload.do',
            data:formdata,
            type:'POST',
            contentType: false,
            processData: false,
            success:function (data) {
                if(data.code=='1'){
                    $.messager.alert('提示消息','新增失败','show');
                }else {
                    $('#dg').dialog('close');
                    $('#dg').datagrid('reload');
                    $.messager.alert('提示消息','新增成功','show');
                }
            }
        });
    }

最后是controller里面的代码：

@RequestMapping("/addupload")
    @ResponseBody
    public Map<String,Object> addupload(@RequestParam(value="codeUrl",required = false) MultipartFile file,String userId,String userCode){
        UserCode user = new UserCode();
        Map<String,Object> map = new HashMap<String, Object>();
        try{
            //获取文件名
            String fileName = file.getOriginalFilename();
            //文件存入存放图片地址
            String path = PropertiesUtil.getProperty("file_resources","localPath");
            //判断接收的文件为不为空
            if(!file.isEmpty() && null != userId&& null != userCode){
                //获取新的文件名字
                String newName = UUID.randomUUID()+fileName.substring(fileName.lastIndexOf("."));
                File newFile = new File(path+newName);
                //将文件写入到存放的地址
                file.transferTo(newFile);
                //对数据库进行操作
                user.setCodeUrl(path+newName);
                user.setUserId(userId);
                user.setUserCode(userCode);
                Long id = userCodeService.add(user);  //因为项目需要，所以就返回了id
                if(null == id){
                    map.put(CardGodConstant.MAP_KEY_MSG,CardGodConstant.ERROR_PARAMETER);   //这些都是枚举提示等等，看不懂没有关系可以忽略。
                    map.put(CardGodConstant.MAP_KEY_DATA,null);
                    map.put(CardGodConstant.MAP_KEY_CODE,CardGodConstant.STR_VALUE_1);
                    return map;
                }else{
                    map.put(CardGodConstant.MAP_KEY_MSG,CardGodConstant.MAP_VALUE_SUCCESS);
                    map.put(CardGodConstant.MAP_KEY_DATA,id);
                    map.put(CardGodConstant.MAP_KEY_CODE,CardGodConstant.STR_VALUE_0);
                    return map;
                }
            }else {
                map.put(CardGodConstant.MAP_KEY_CODE,CardGodConstant.STR_VALUE_1);
            }
        }catch (Exception e){
            logger.error(CardGodConstant.ERROR_MSG);
            e.printStackTrace();
            map.put(CardGodConstant.MAP_KEY_CODE,CardGodConstant.STR_VALUE_1);
            return map;
        }
        return map;
    }