表单提交时上传图片 表单ajax提交

页面

<script type="text/javascript" src="js/jquery.form.js"></script>
<script language="javascript">
$(function() {

  //提交表单
        $("#add").click(function() {
            if($(‘#addForm‘).form(‘validate‘)){
               var options = {
                    url: ‘${currentBaseUrl}/doAdd‘,
                    type: ‘post‘,
                    success: function (data) {
                        if("ok"==data.message)
                            window.location.href=data.backUrl;
                        else{
                            $.messager.alert(‘提示‘, data.message);
                            $("#imageFile").val("").focus()
                        }
                    }    
                };
                $(‘#addForm‘).ajaxSubmit(options);
            }         
        });
})
</script>

<form method="post" class="validForm" id="addForm" name="addForm" enctype="multipart/form-data">
    <input type="file" id="imageFile" name="imageFile"  class="txt w240 easyui-validatebox"  />
    <input type="button" id="add" class="btn" value="提交" />
</form>



Controller类

@RequestMapping(value = "doAdd", method = { RequestMethod.POST })
@ResponseBody
 public HttpJsonResult<Object> doAdd(MultipartHttpServletRequest request, HttpServletResponse response, FbNews news){
        HttpJsonResult<Object> jsonResult = new HttpJsonResult<Object>();
        try {
            MultipartFile multipartFile = request.getFile("imageFile");
            if (null != multipartFile && multipartFile.getSize() > 0) {
                //扩展名
                String extend = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();
                if (!isImg(extend)) {
                    jsonResult.setMessage("请上传图片!");
                    return jsonResult;
                }
                
                File tmpFile = new File(buildImgPath(request) + "/"+ multipartFile.getOriginalFilename());
                if (!multipartFile.isEmpty()) {
                    byte[] bytes = multipartFile.getBytes();
                    BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(tmpFile));
                    stream.write(bytes);
                    stream.close();
                }
            }
            /**其他代码省略**/
            
            jsonResult.setMessage("ok");

   //添加成功 返回列表页面
            jsonResult.setBackUrl(DomainUrlUtil.getJM_URL_RESOURCES() + "/admin/fbfc/news");
            return jsonResult;
        } catch (Exception e) {
            throw new RuntimeException();
        }
        
    }

//是否是图片

private boolean isImg(String extend) {
        List<String> list = new ArrayList<String>();
        list.add("jpg");
        list.add("jpeg");
        list.add("bmp");
        list.add("gif");
        list.add("png");
        list.add("tif");
        return list.contains(extend);
    }

//图片上传的路径

private String buildImgPath(HttpServletRequest request) {
        String path = "upload";
        SimpleDateFormat formater = new SimpleDateFormat("yyyyMMdd");
        path += "/" + formater.format(new Date());
        path = request.getRealPath(path);
        File dir = new File(path);
        if (!dir.exists()) {
            try {
                dir.mkdirs();
            } catch (Exception e) {
                log.error("error", e);
            }
        }
        return path;
    }

时间: 2024-10-14 01:48:08

表单提交时上传图片 表单ajax提交的相关文章

git提交时设置忽略部分文件提交

git当前提交项目时总是会提交很多东西把Debug文件也提交了 在项目根目录(例如我的项目文件夹下,.sln文件的上一级目录)下建一个.gitignore文件,文件内容直接可粘贴下面的,这样 packages,Debug一些文件在点击提交时就不会出现了 ## Ignore Visual Studio temporary files, build results, and ## files generated by popular Visual Studio add-ons. # User-spe

jQuery判断 form表单提交时如果表单里有input标签为空那么不提交form表单

<head> <script type="text/javascript"> $("#sub1").click(function(){ var text1=$("#text1").val(); if(text1==""){ alert("不能为空!"); $("#text1").select(); $("#text1").focus(); }e

ajax提交表单、ajax实现文件上传

ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用jquery的$.ajax({..}), 支持提交普通表单,但不支持含有文件的复杂表单; ($.post 或 $.get底层用的都是$.ajax) 方式三:使用jquery插件ajaxFileUpload.js, 支持上传文件,但不支持提交表单 方式四:使用jquery.from.js,支持提交同时

沫沫金 - jQuery序列化form表单【支持ajax提交form对象表单entity.xxx】

需要form表单提交,大表单对字段后台人工处理太麻烦.还是选择form表单对象(entity.xx)提交方便,那么怎么ajax提交这样的form对象表单呢? 命名jquery.commons.js内容如下 /**  * FORM对象表单ajax提交前数据处理方法  * @param frm  * @returns JSON Object  */ function getFormJson(frm) {     var o = {};     var a = $(frm).serializeArra

前端笔记-jquery ajax提交表单

jquery ajax提交表单 最近才发现,jquery ajax提交表单可以这么简单 $.ajax({ url: "udpate", type:"POST", data:$('#formId').serialize(), success: function(data){ alert(data); }, error:function(data){ }}); } 关键在于data:$('#formId').serialize(),这里的formId就是表单的Id. 以

form提交时,传递额外的参数

在进行表单提交时,会遇到在提交前增加额外参数的情况,对此有如下几种解决方法: 1. 在表单里使用hidden的input,将参数放到里面. 缺点:在form表单里会增加一些input节点,感觉不爽. 2. 在提交前使用javascript动态在表单里添加input. 缺点:需要写脚本. 3. 使用ajax提交拼接参数. 缺点:如果表单里有文件需要上传,就行不通了. form提交时,传递额外的参数,布布扣,bubuko.com

jquery的ajax提交后,会跳转页面

今天在写代码的时候,遇到一个很奇怪的问题,一个form表单,用的是ajax的方式提交.结果,在服务器端php中,使用exit(),函数后都不能停止,并且继续跳转到本页.请求如下: 第一个请求中,其实我已经停止了代码,但程序并没有执行到,但返回的也是200状态码. 虽然,请求返回的是200,但查看reponse时,却发现是空的. 后来经过排查发现,原来是前端写的页面已经在input控件上,写好了type="submit"(都怪自己粗心,居然没看看),然后真相大白了.原因是,提交按钮绑定了

ajax 上传文件,post上传文件,ajax 提交 JSON 格式的数据

ajax简介 前后台做数据交互 前后端做数据交互的方式(三种): (1)浏览器窗口输入地址(get的方式)(2)form表单提交数据(3)ajax提交数据 特点 特点: (1)异步 异步与同步的区别:同步是请求发过去,要等着回应:异步不需要等待,可以进行其他操作 (2)局部刷新 使用 使用: (1)url:匹配的路由 (2)type:发送的的方式 (3)data:发送的数据 (4)success:发送的数据成功回调条数 $('.btn').click(function () { $.ajax({

KindEditor:Ajax提交表单时获取不到HTML内容

当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? --------------------------------------------------- KindEditor 4.x documentation:获取HTML数据 // 取得HTML内容html = editor.html(); // 同步数据后可以直接取得textarea的valueedit