上传文件

上传文件在前端有两种方法

1.通过Form表单提交

2.使用jquery插件ajaxfileupload进行异步上传

1.通过Form表单提交

From表单

        <form id="testForm" action="make/test.hd" method="post" enctype="multipart/form-data" target="ztFrame">
		上传图片
		<input type="file" id="warnRoute" name="warnRoute"></input>
		<div class="warnBtn warnBtn_margin" id="saveBtn">保存</div>
        </form>
        <iframe name='ztFrame' id=ztFrame frameborder=no border=0 style='width:0px;height:0px'></iframe>

注1：此处Form表单属性target设置为ztFrame，接收返回结果。form的target属性值有：

_blank	在新窗口中打开。
_self	默认。在相同的框架中打开。
_parent	在父框架集中打开。
_top	在整个窗口中打开。
framename	在指定的框架中打开。

注2：若不采用jquery进行表单验证，则需要设置值οnsubmit="return validate()"

jQuery进行表单验证和提交，并接收ztFrame的返回值

		
	    $("#saveBtn").click(function(){
            
            //内容校验
            if(!warnFormValidate()){
                return false;
            }
			
            //先将预警图片保存至后台
            $.utilsPlug.maskStart();
            $("#warnMakeForm").submit();
            
	    //接收返回值
            var interval = setInterval(function(){
                var returnContent = $("#ztFrame").contents().find("font");
                if(returnContent.length > 0){
                    if(returnContent.html() === "false"){
                        art.dialog({
                            title: '提示',
                            icon: 'warning',
                            zIndex : 2400,
                            content: "生成预览失败",
                            ok: function(){},
                            close : function(){
                                $.utilsPlug.maskEnd();
                            }
                        });  
                        
                    }else{
                        art.dialog({
                            title: '提示',
                            content: "生成预览成功",
                            zIndex : 2400,
                            icon: 'succeed',
                            ok: function(){},
                            close : function(){
                                $.utilsPlug.maskEnd();
                            }
                        }); 
                    }
                    clearInterval(interval);
                }  
            }, 1000);
        })

2.使用jquery插件ajaxfileupload进行异步上传

From表单

        <form id="testForm" action="make/test.hd" method="post" >
		上传图片
		<input type="file" id="warnRoute" name="warnRoute"></input>
		<div class="warnBtn warnBtn_margin" id="saveBtn">保存</div>
        </form>
        

提交表单

//提交表单
$("#subBtn").die().live("click", function () {
	$.ajaxFileUpload({
		url: 'system/uploadWarnRoute.hd',
		type: 'post',
		secureuri: false, //一般设置为false
		fileElementId: 'routImg', // file标签的id
		dataType: 'text', //返回值类型，一般设置为json、application/json
		data: {//一同上传的数据
			id: $("#id").val(),
			name: $("#name").val(),
			descr: $("#descr").val(),
			adminId: $("#adSel").attr("finalAdid")
		},
		success: function (data, status) {
			refreshGrid();
			art.dialog({
				title: '提示',
				lock: true,
				content: '操作成功！',
				button: [{
						name: '确定',
						callback: function () {}
					}]
			});
		},
		error: function (data, status, e) {
			alert(e);
		}
	});
})

后台代码

		
    @ResponseBody
    @RequestMapping(value = "test.hd")
    public void saveTempRouteImg(MultipartHttpServletRequest request, HttpServletResponse response) {
        String imgPath = "false";
        try {
            request.setCharacterEncoding(SystemConstant.CHAR_ENCODING);
            //获取图片
            MultipartFile file = request.getFile("warnRoute");
            imgPath = "upload/temp/route_" + System.currentTimeMillis() + ".jpg";

            File imgFile = new File(SystemConstant.WEB_ROOT + imgPath);

            //如果目录不存在，则创建
            if (!imgFile.exists()) {
                imgFile.mkdirs();
            }
            file.transferTo(imgFile);
            
            //返回信息
            PrintWriter pw = response.getWriter();
            pw.write("<font>" + imgPath + "</font>");
            pw.close();

        } catch (Exception e) {
            logger.error(e);
        }
    }

applicationContext.xml中需要配置：

    
    <!--文件上传-->  
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        <property name="maxUploadSize" value="10000000"/>  
    </bean>