<%@ 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. Maven_profile_使用profile配置不同环境的properties（实践）

    配置方法分为以下几个步骤: 1.配置profiles节点(pom.xml) 2.配置build节点(pom.xml)--如果不配置该节点则无法找到profile中的properties属性值,并且配置 ...

  2. LocalBroadcastManager 的实现原理，Handler还是 Binder？

    原文: http://www.trinea.cn/android/localbroadcastmanager-impl/ 对 LocalBroadcastManager 大家应该都不陌生,相对 Bro ...

  3. python中引入包的时候报错AttributeError: module 'sys' has no attribute 'setdefaultencoding'解决方法？

    python中引入包的时候报错:import unittestimport smtplibimport timeimport osimport sysimp.reload(sys)sys.setdef ...

  4. 搭建vpn环境：centos7+openvpn

    vpn的含义:virtual private network vpn的作用/使用场景:最常见的一个作用,你通过公网来访问某个局域网里的主机/服务,其实就是搭建一个隧道,用公网传递你的数据包,等数据包到 ...

  5. How to stop pycharm show files in project in red color?

    You can change the file color to whatever you want. File > Settings > Editor > Colors&F ...

  6. 新手理解HTML、CSS、javascript之间的关系

    http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...

  7. HTML5学习笔记（持续更新中....）

    平时的工作中,不知不觉我们应用了很多HTML5,但当正儿八经问起来你对HTML5了解多少,很多时候都有点懵. 做个简单的HTML5总结.包括简介.要学的知识点.凌乱的知识点 HMTL5简介 定义:ht ...

  8. maven install时报错Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile

    首先检查父项目,子项目的jdk版本是否一致,编码格式是否一致我的问题就错在了编码格式上,父项目用的是UTF-8,子项目新建的,默认GBK这时,使用maven install命令出错 提示:[INFO] ...

  9. CF451E Devu and Flowers （隔板法 容斥原理 Lucas定理 求逆元）

    Codeforces Round #258 (Div. 2) Devu and Flowers E. Devu and Flowers time limit per test 4 seconds me ...

  10. krpano

    调试: krpano的场景下方,有一个Console面板可以用来输出即时日志. 可以使用 showlog(true); 来设置打开此功能,默认是关闭的. 这样就可以把下面三种日志实时显示出来了: tr ...