关于formData方式ajax上传文件的方式在笔者随笔开发日记5-18中有描述,在此不做记录.

由于之前使用的是formData方式上传文件,但是在后期处理浏览器兼容问题的时候出现头痛的事情,formData的写法中有一句话

var formData = new FormData($("#add-documentForm")[0]);

结果在IE下出现FormData未定义的问题,于是改用了jqueryForm进行ajax文件上传

有两种方式: ajaxForm:在界面加载完成的时候绑定到form表单上,当form表单提交时就是ajax提交

　　　　　 ajaxSubmit :手动调用插件的ajax提交，可以在form提交的时候触发ajaxSubmit，也可以在一个button的click事件里面触发ajaxSubmit<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  <%  

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

   <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <script type="text/javascript" src="<%=basePath %>common/js/jquery-1.8.2.min.js"></script>

    <script type="text/javascript" src="<%=basePath %>common/js/jquery.form.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

             $("#myForm").submit(function(){

                $('#myForm').ajaxSubmit({

                    beforeSubmit:handleBeforeSubmit,

                    success:handleSuccess

                });

                //记得返回false，阻止页面的默认提交行为

                return false;

            });

        });

        /**

         * 提交请求发出之前的处理

         */

        function handleBeforeSubmit(){

            console.info('提交请求发出之前的处理')

        }

        /**

         * 上传成功后的处理

         */

        function handleSuccess(){

            console.info('上传成功后的处理')

            alert('上传成功 !');

        }

　　/**
　　 * ajaxForm方式,在页面加载完成时绑定到form表单上
　　 *
　　 */
　　　　$(document).ready(function() {

            $('#myForm').ajaxForm({

                beforeSubmit:handleBeforeSubmit,

                success:handleSuccess

            });

        });  

 </script>

 </head>

  <body>

    <form action="upload/uploadFile.htm" method="post" enctype="multipart/form-data" id="myForm">

      <label for="myFile">选择文件：</label>

      <input type="file" name="myFile" />

      <input type="hidden" name="myfield" value="myvalue">

      <input type="submit" value="上传"/>

   </form>

  </body>

</html>

　在引入js文件时候,注意先引入jquery文件  再引入jquery-form.js

　　

文件上传 jqueryForm的更多相关文章

  1. MVC&WebForm对照学习：文件上传(以图片为例)

    原文  http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页::  ::  ::  ::管理 5 Posts :: 0 ...

  2. spring mvc ajax异步文件的上传和普通文件上传

    表单提交方式文件上传和ajax异步文件上传 一:首先是我在spring mvc下的表单提交方式上传 ssm的包配置我就不一一详细列出来了,但是上传的包我还是列出来 这一段我也不知道怎么给大家讲解就是直 ...

  3. 循序渐进学.Net Core Web Api开发系列【5】：文件上传

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍通 ...

  4. FormData使用方法详解，以及在IE9环境下，前端的文件上传问题

    FormData的主要用途有两个: 1.将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率. 2.异步上传文件 一.创建formData对象 ...

  5. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  6. 11、Struts2 的文件上传和下载

    文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...

  7. Java FtpClient 实现文件上传服务

    一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /b ...

  8. 小兔Java教程 - 三分钟学会Java文件上传

    今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...

  9. ,net core mvc 文件上传

    工作用到文件上传的功能,在这个分享下 ~~ Controller: public class PictureController : Controller { private IHostingEnvi ...

随机推荐

  1. 【转】python操作mysql数据库

    python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...

  2. DSP基础学习-ADC采样

    DSP基础学习-ADC采样 彭会锋 2015-04-27 22:30:03 在查看ADC采样例程的时候我发现了下面的代码挺有意思的 EALLOW; GpioCtrlRegs.GPAMUX2.bit.G ...

  3. AOP(面向切面)的粗俗理解

    百度百科的解释:AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或阶段,以获得逻辑过程中各部分之间低耦合性的隔离效果. 一个比较绕的概念,简单来说就是把不影响业 ...

  4. Qt5.3中qml ApplicationWindow设置窗口无边框问题

    这个版本的qt在这里有点bug.. 设置ApplicationWindow的flags属性为Qt.FramelessWindowHint的确可以使程序无边框,但是同时程序在任务栏的图标也没了. 看文档 ...

  5. 转:Hive SQL的编译过程

    Hive是基于Hadoop的一个数据仓库系统,在各大公司都有广泛的应用.美团数据仓库也是基于Hive搭建,每天执行近万次的Hive ETL计算流程,负责每天数百GB的数据存储和分析.Hive的稳定性和 ...

  6. Python中面向对象的一些关于私有变量和继承的理解

    成员可见性,变量和方法的可见性.使用“__”开头的变量和方法为私有变量和方法 class Student(): def __init__(self, name, age): # 构造函数 # 初始化变 ...

  7. 为什么是link-visited-hover-active

    前言 通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的样式.这里我就按CSS2规范中推荐的顺序 ...

  8. 通过格式化字符串漏洞绕过canary

    1.1    canary内存保护机制 1.1.1    canary工作原理 canary保护机制类似于/GS保护机制,是Linux下gcc编译器的安全保护机制之一,在栈中的结构如下图所示: 在函数 ...

  9. Linux下第一次Node尝试

    由于需求所定,必须在服务器上使用nodejs,第一次使用过程记录下来. 首先是安装node,这里可以下载到各个版本的node:https://nodejs.org/download/ 我是进入rele ...

  10. iOS跳转支付宝付款码和扫一扫页面

    iOS跳转支付宝付款码和扫一扫页面 // 是否支持支付宝 NSURL * myURL_APP_A = [NSURL URLWithString:@"alipay://"]; if ...