上传文件

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

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进行表单验证，则需要设置值onsubmit="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, //一般设置为falsefileElementId: 'routImg', // file标签的iddataType: 'text', //返回值类型，一般设置为json、application/jsondata: {//一同上传的数据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>