关于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. TIME_WAIT和CLOSE_WAIT

    先看下三次握手四次挥手的状态变化: 通常会遇到下面两种情况: 服务器保持了大量TIME_WAIT状态 服务器保持了大量CLOSE_WAIT状态 因为linux分配给一个用户的文件句柄是有限的,而TIM ...

  2. OBS插件学习入门：一个非常简单的、调节音量的filter

    一个非常简单的.调节音量的filter,非线性调节: #include <obs-module.h> #include <math.h> struct volume_data ...

  3. 初次安装git配置用户名和邮箱及密钥

    在Windows上安装Git: 在Windows上使用Git,可以从Git官网直接下载安装程序,(网速慢的同学请移步国内镜像),然后按默认选项安装即可. 安装完成后 键盘敲上:windows+r你会看 ...

  4. lr设置监控本地和远程windows系统资源

    LoadRunner之设置监控本地和远程Windows系统资源   一般在客户端通过LoadRunner对服务器进行压力测试,都需要实时监控服务器端的系统资源,本篇主要简单介绍一下如何设置在LoadR ...

  5. [转载]java实现word转pdf

    最近遇到一个项目需要把word 转成pdf,百度了一下网上的方案有很多,比如虚拟打印.给word 装扩展插件等,这些方案都依赖于ms word 程序,在java代码中也得使用诸如jacob或jcom这 ...

  6. yii2 实现excel导出功能

    官方教程地址:http://www.yiiframework.com/extension/yii2-export2excel/ 安装: Either run php composer.phar req ...

  7. Composer 扩展包安装方法

    问题说明 我们经常要往现有的项目中添加扩展包,有时候因为文档的错误引导,如下图来自 这个文档 的: composer update 这个命令在我们现在的逻辑中,可能会对项目造成巨大伤害. 因为 com ...

  8. 联想THINKPAD E40的快捷键怎么关闭？哪些F1 F2 F3的键我需要用到 但是每次都按FN 太烦人了

    1.开机时,按F1进入BIOS,依次选择CONFIG--Keyboard/Mouse,2.在Change to "f1-f12 keys"选项中,更改设置为Legacy或者Defa ...

  9. Kotlin Reference (七) Returns and Jumps

    most from reference kotlin有三个结构跳跃表达式 return 默认情况下,从最近的封闭函数或匿名函数返回. break 跳出整个循环 continue 跳出本次循环,进行下一 ...

  10. No form of payment has been added yet.

    You may select a form of payment after your account balance reaches $10.00. Learn more 显然是说达到10美元以后才 ...