<%@ 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. jquery 将disabled的元素置为enabled的三种方法

    转--http://www.jb51.net/article/19342.htm 在jquery中可以通过jqueryObj.attr("disabled","disab ...

  2. bzoj1584

    1584: [Usaco2009 Mar]Cleaning Up 打扫卫生 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 467  Solved: 31 ...

  3. 面向对象(Object-Oriented)

    面向对象 面向对象,即我们以对象为核心去实现我们的目的,对象顾名思义:万物皆对象,一个人,一条狗... 当我们通过对象处理一些事情时,会让我们的代码清晰明了,内部高聚合,对外低耦合,即封装的思想 相比 ...

  4. redis配置详解

    ##redis配置详解 # Redis configuration file example. # # Note that in order to read the configuration fil ...

  5. 使用Swift打造动态库SDK和DemoAPP时所遇到的（Xcode7.3）

    使用Swift开发SDK的优点是,生成的SDK对于Obj-C或是Swift调用都不需要自己去建桥接文件,因为Swift的SDK打包时默认已经自动生成供OC调用的.h文件.OC调用时直接import,s ...

  6. poj3468 A Simple Problem with Integers(zkw区间修改模板)

    此题是一道线段树的裸题,这里只是为了保存我的zkw线段树模板 #include <cstdio> #include <cstring> #include <iostrea ...

  7. red hat关于桥接模式连不上外网或者没有IP

    很多人·在启动虚拟机后连接不上外网,即ifconfig没有ip地址,我总结了一下需要注意的地方: 以下全是在桥接模式. 1.在windows中打开任务管理器-->服务中找到一下几个服务,确保它们 ...

  8. elasticsearch snapshot

    一.Repositories 在elasticsearch.yml文件中增加path.repo路径配置: $ vim /etc/elasticsearch/elasticsearch.yml path ...

  9. Oracle开机自启动

    linux下启动oracle su - oracle #用oracle用户登陆 sqlplus /nolog conn /as sysdba startup exit lsnrctl start ex ...

  10. xml格式的数据转化成数组

    将得到的xml格式的数据转化成数组 <?php //构造xml $url = "http://api.map.baidu.com/telematics/v3/weather?locat ...