前两篇文章有介绍使用form.submit 实现附件的上传，但是这种方式使用起来很不方便，如过需要再上传成功以后执行一些其他的操作的时候比较麻烦。下面我为大家介绍下使用ajax实现附件上传的功能：

1.使用FormData对象上传附件：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <title></title>

</head>

<body>

    文件:<input id="file" type="file" name="file"/>

<button id="upload">上传文件</button>

</body>

<script type="text/javascript">

    $(function () {

        $("#upload").click(function () {

            var formData = new FormData();
            data.append("file", $("#file")[0].files[0]);

            $.ajax({

                type: 'post',

                url: "XXX",

                data: formData,

                cache: false,

                processData: false,

                contentType: false,

            }).success(function (data) {

                alert(data);

            }).error(function () {

                alert("上传失败");

            });

        });

    });

</script>

</html>

 

参数说明：1、processData设置为false。因为data值是FormData对象，不需要对数据做处理。数据处理由于是object类型，jquery在处理是会无法处理报错 ;

2、cache设置为false，上传文件不需要缓存。

3、contentType设置为false。因为是由表单构造的FormData对象，且已经声明了属性enctype=”multipart/form-data”，所以这里设置为false。

但是这个FormData对象只是在高版本的IE中支持，在低版本的IE中是不支持FormData对象的，下面这个方法可以实现低版本IE和高版本IE上传附件的兼容问题

2、使用form.ajaxSubmit提交请求，这个方法需要引用jquery.Form.js这个类库才可以，否则ajaxsubmit是无法使用的

                  <label for="btn_file">上传附件</label>

                 <form id="form" method="post" enctype="multipart/form-data">

                    <input type="file" id="btn_file" name="file" onchange="fileUpload()">

                 </form>
  function fileUpload()

    {

        $('#form').ajaxSubmit({

            type: "post",

            url: "XXX.do?",//请求的 URL地址

            data: $('#form').serialize(),

            error: function (data) {

                alert(data);

            },

            success: function (data) {

                var result = eval('(' + data + ')');

                if (result.success) {

                  alert(result.res);

                }

            }

        });

}

Ajax实现附件上传的更多相关文章

  1. jquery 通过ajax FormData 对象上传附件

    之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div>   流程图: <input id=& ...

  2. MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题，答案是不能的！

    MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...

  3. PHP Ajax JavaScript 实现 无刷新附件上传

    普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...

  4. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

  5. jQuery+php实现ajax文件即时上传

    很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像.本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进 ...

  6. jsp页面附件上传暂存的处理

    有没有遇到页面是新建一个新对象,对象里面需要上传附件,但是只有当对象保存时才将附件一同上传到数据库的情况? 这种情况的处理可以参考狐狸的思路: @jsp页面创建一个botton bn,该button的 ...

  7. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Springmvc file多附件上传 显示 删除操作

    之前项目需求要做一个多附件上传 并显示上传文件 带删除操作 一筹莫展之际搜到某个兄弟发的博客感觉非常好用被我copy下来了此贴算是改良版 再次感谢(忘记叫什么了时间也有点久没有历史记录了)先上图 基于 ...

  9. 附件上传vue组件封装（一）

    //父页面部分 <attachment @newFileList="newFileList" :operationType="operationType" ...

随机推荐

  1. inndo 表与存储逻辑_1

    ------------------------------------------2015-03-03--------------------------------------- 表 : inno ...

  2. ConcurrentSkipListMap的常用方法

    package com.geo.map;  import java.util.Iterator;import java.util.Map.Entry;import java.util.Set;impo ...

  3. jenkins部署报404错误

    环境:tomcat 7+jdk1.7+win10 64 jenkins_1.5.23 部署完成后服务器启动输入网址:http://192.168.3.100:8080/jenkins打开无法访问报40 ...

  4. Oracle告Google输了

    Oracle告Google输了 boxi • 2016-05-27 • 大公司 Google表示,陪审团的认定代表了Android生态体系.Java开发社区以及依靠开放免费编程语言开发创新消费者产品的 ...

  5. 【使用篇二】SpringBoot整合Listener（3）

    两种方式: 通过注解扫描完成 Listener 组件的注册 通过方法完成 Listener 组件注册 一.通过注解扫描完成 Listener 组件的注册 1. 编写Listener类 /*** spr ...

  6. 组件注册-自定义TypeFilter指定过滤规则

    组件注册-自定义TypeFilter指定过滤规则 4.1 FilterType.ANNOTATION 按照注解方式 4.2 FilterType.ASSIGNABLE_TYPE 按照给定的类型 @Co ...

  7. [LeetCode] 296. Best Meeting Point 最佳开会地点

    A group of two or more people wants to meet and minimize the total travel distance. You are given a ...

  8. 一步步从零开始用 webpack 搭建一个大型项目

    开篇 很多人都或多或少使用过 webpack,但是很少有人能够系统的学习 webpack 配置,遇到错误的时候就会一脸懵,不知道从哪查起?性能优化时也不知道能做什么,网上的优化教程是不是符合自己的项目 ...

  9. Linux中Too many open files 问题分析和解决

    今天某个服务的日志中出现了大量的异常: [WARN ] 2018-06-15 16:55:20,831 --New I/O server boss #1 ([id: 0x55007b59, /0.0. ...

  10. ROS第一次开网站跳转到公告页(任意地址跳转)方法

    原文: http://bbs.routerclub.com/thread-74654-1-5.html ROS首页强开配置脚本: /ip firewall natadd action=dst-nat ...