fileinput在SSM中简单应用

前端代码 包

<link rel="stylesheet" href="<%=basePath%>/css/bootstrap.min.css">
	
<script src="<%=basePath%>/js/jquery.min.js"></script>
<script src="<%=basePath%>/js/bootstrap.min.js"></script>
	
<!-- 图片上传 -->
<link href="<%=basePath%>css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>js/fileinput.js" type="text/javascript"></script>
<script src="<%=basePath%>js/fileinput_locale_de.js" type="text/javascript"></script>

body中的

<input type="file" name="uploadimg" id="uploadimg" multiple class="file-loading" />

js

$(function () {
        initFileInput("uploadimg");
    })

    function initFileInput(ctrlName) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: "upload/uploadImg3", //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
            uploadAsync: true, //默认异步上传
            showUpload: true, //是否显示上传按钮
            showRemove : true, //显示移除按钮
            showPreview : true, //是否显示预览
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            //maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('filepreupload', function(event, data, previewId, index) {     //上传中
            var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
            console.log('文件正在上传');
        }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
            console.log('文件上传成功！'+data.id);

        }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
            console.log('文件上传失败！'+data.id);


        })
    }

其中uploadurl写提交的地址其他也没啥了

后面是controller层代码 注意获取的文件名对应requestparam 还有返回值格式是json 设置成当错误时返回json格式 里面有error 一类的信息，成功则返回空json串。网上很多都是返回地址什么的 搞了我一下午 。

@RequestMapping(value="/uploadImg3",method=RequestMethod.POST) 
	@ResponseBody
	public JSONObject uploadImg3(@RequestParam("uploadimg")CommonsMultipartFile file,HttpServletRequest request){             
		//根据相对路径获取绝对路径，图片上传后位于元数据中  
        String realUploadPath=request.getServletContext().getRealPath("/")+"images";
        //获取上传后原图的相对地址  
        String imageUrl = new String();
        Map<String,Object> map=new HashMap<String,Object>();
		try {
			imageUrl = uploadService.uploadImage(file, realUploadPath);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			map.put("error", "失败啦");
			map.put("url",imageUrl);
			e.printStackTrace();
		}finally{
			return JSONObject.fromObject(map);
		}
	}