<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>文件上传</title>

<script src="static/js/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="static/js/jquery-form.js"></script>

<script type="text/javascript">

    function subimtBtn() {

        var form = $("form[name=fileForm]");

        var options  = {

            url:'${pageContext.servletContext.contextPath}/servlet/imageUploadServlet',

            type:'post',

            success:function(data)

            {

                var jsondata = eval("("+data+")");

                if(jsondata.error == "0"){

                    var url = jsondata.url;

                    alert(url)

                    $("#img").attr("src",url);

                }else{

                    var message = jsondata.message;

                    alert(message);

                }

            }

        };

        form.ajaxSubmit(options);

        //$("#fileForm").submit();

    }

</script>

</head>

<body>

            <div class="modal-body">  

                <form action='${pageContext.servletContext.contextPath}/servlet/imageUploadServlet' enctype="multipart/form-data" method="post" id="fileForm" name="fileForm">

                    <input type="file" name="filename">

                </form>  

            </div>  

            <div class="modal-footer">

                <button class="btn btn-primary"  onclick="subimtBtn();">提交</button>

            </div>  

    <div>

     <img alt="img" src="" id="img">

    </div>

</body>

</html>

　　 最近在项目中需要实现图片的上传，并且成功后返回图片上传保存路径，通过查找资料探索研究，实现了项目功能需求，记在这方便自己以后查阅，也为有同样需求的码友分享，功能实现比较简单，如果有好的建议和实现方法，还望多多指教。

主要将实现一下两个功能： 
1、使用commons-fileupload实现文件的上传（包括图片）； 
2、使用jquery-form.js实现表单提交成功的回调函数。

页面设计fileupload.jsp：

jquery.form.js 点击下载

http://files.cnblogs.com/files/blogs2014/jquery.form.rar 

form.submit(回调函数)——引用jq-form.js的更多相关文章

  1. form.submit 方法 并不会触发 form.onsubmit 事件

    做表单的时候发现一个奇怪的地方,总结下: form.submit 方法 并不会触发 form.onsubmit 事件,看代码: <body> <div class="con ...

  2. js 中的submit 回调函数

    1.submit.php <?php $arr = $_POST; $arr['msg']=1; //echo $_POST['uname']; echo json_encode($arr); ...

  3. 使用匿名函数在回调函数中正确访问JS循环变量

    有时候, 需要以不同的参数调用某个URL,并且在回调函数中仍然可以访问正在使用的参数, 这时候, 需要使用闭包保存当前参数, 否则, 当回调函数执行时, 之前的参数很可能早已被修改为最后一个参数了. ...

  4. asp.net form submit 在Chrome里面看Form提交

    Chrome中查看 request  form data 在Fiddler中查看

  5. JS回调函数的应用，原来这么简单！

    JS的回调函数很简单,看代码: 在a.js中 var myback = null; function load(obj){ myback = obj; } function save(){ // 后台 ...

  6. Node.js：创建应用+回调函数（阻塞/非阻塞）+事件循环

    一.创建应用 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi.从这个角度看,整个"接收 HTTP ...

  7. Node js 安装+回调函数+事件

    /* 从网站 https://nodejs.org/zh-cn/ 下载 这里用的 9.4.0 版本 下载完安装 安装目录是 D:\ApacheServer\node 一路默认安装 安装后打开cmd命令 ...

  8. PHP中的回调函数和匿名函数

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  9. 什么叫CallBack函数，怎么用回调函数？

    JQuery众多常用方法中很经常会用到回调函数, 理解好js callback函数定义及用法,我们就可以利用callback函数帮我们做很多事情啦! A callback is a function ...

随机推荐

  1. Asp.Net MVC<三> : ASP.NET MVC 基本原理及项目创建

    MVC之前的那点事儿系列 解读ASP.NET 5 & MVC6系列 MVC模拟(摘自ASP.NET MVC5框架揭秘) Asp.net中,通过HttpModule的形式定义拦截器,也就是路由表 ...

  2. Hibernate连接数据库超时设置autoReconnect=true

    如果连接闲置8小时 (8小时内没有进行数据库操作), mysql就会自动断开连接, 要重启tomcat. 不用hibernate的话, connection url加参数: autoReconnect ...

  3. Maven随记

    如何保持依赖的多个jar保持版本一致 在引入依赖的时候常常需要依赖多个独立的模块, 譬如Spring的content, aop等等, 为了保持版本一致, 可以设置<spring.version& ...

  4. 教你一招：Excel中使用vlookup函数查询序列所对应的值

    以一个简单的例子做示范,列数相对较少,看起来也比较清楚:在奥运会或其他比赛上我们可以看到各个国家的奖牌数的变化:那么我们如何查询国家对应的总奖牌数. 我们用到的函数是vlookup,它是一个纵向查询函 ...

  5. SpringMVC常用注解的用法

    1. @PathVariable 当使用@RequestMapping URI template 样式映射时, 即 someUrl/{paramId}, 这时的paramId可通过 @Pathvari ...

  6. kafka入门：简介、使用场景、设计原理、主要配置及集群搭建（转）

    问题导读: 1.zookeeper在kafka的作用是什么? 2.kafka中几乎不允许对消息进行"随机读写"的原因是什么? 3.kafka集群consumer和producer状 ...

  7. centos 7.0 编译安装php 5.6.7

    编译安装php参考资料 MySQL PHP API http://dev.mysql.com/doc/apis-php/en/index.html nginx + php +mysql 最简单安装 官 ...

  8. .Net创建windows服务入门

    本文主要记录学习.net 如何创建windows服务. 1.创建一个Windows服务程序 2.新建安装程序 3.修改service文件 代码如下 protected override void On ...

  9. nginx图片处理

    前言 不管一个系统或网站的大与小,都存在相应的图片处理,生成缩略图.为图片加水印等等,如果涉及到APP端,这个图片的处理需求变得更加重要了,因为在目前看来,客户端的屏幕大小不一,会导致以下问题: 1. ...

  10. block要掌握的东西

    /* block要掌握的东西 1> 如何定义block变量 int (^sumBlock)(int, int); void (^myBlock)(); 2> 如何利用block封装代码 ^ ...