前两篇文章有介绍使用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. leetcode - 使用栈实现队列的特性

    使用栈实现队列的特性 使用栈实现队列的下列操作: push(x) -- 将一个元素放入队列的尾部. pop() -- 从队列首部移除元素. peek() -- 返回队列首部的元素. empty() - ...

  2. supervisor 管理应用程序

    supervisor 进程管理 主要包含后台进程 supervisord 和控制台 supervisorctl 两个程序 supervisor # 官方文档 http://www.supervisor ...

  3. Windows 下 pycharm 创建Django 项目【用虚拟环境的解释器】

    1.  背景 我在 Windows 下的 pycharm  直接创建 全新 Django  项目 会  pip 和其他报错 ,暂时解决不了,另外后续的多个项目只需要一套python 环境, 所以可以 ...

  4. 201871010101-陈来弟《面向对象程序设计（java)》第十五周学习总结

                                                                                                         ...

  5. httpHandlers path="*.sky"

    <httpHandlers> <add verb="*" path="*.sky" type="WebAppHttpHandlerT ...

  6. 自定义web框架（django）

    Django基础了解知识 HTTP协议(超文本传输协议) HTTP协议 四大特性: 基于TCP/IP之上作用于应用层 基于请求响应 无状态 引申出cookie session token-- 无连接 ...

  7. LG3812 「模板」线性基 线性基

    问题描述 LG3812 题解 线性基是一类擅长解决异或问题的数据结构(也不算数据结构吧...就是一种玄学的东西) 对于数列 \(a\) ,它的线性基 \(d\) 为 出现 \(1\) 的最高位在第 \ ...

  8. Redis面试题（46题）

    1.什么是Redis?简述它的优缺点? Redis 的全称是:Remote Dictionary.Server,本质上是一个 Key-Value 类型的内存数据库,很像memcached,整个数据库统 ...

  9. IAR环境搭建

    工具下载:https://pan.baidu.com/s/1nwv0RVz 第一步:右键点击EW8051-EV-8103-Web.exe,使用管理员权限运行. 第二步:我们运行之后只要一直Next下去 ...

  10. Linux性能优化实战学习笔记：第二十三讲

    一.索引节点和目录 1.索引节点 2.目录项 3.关系 为了帮助你理解目录项.索引节点以及文件数据的关系,我画了一张示意图,你可以对照这张图,来回忆刚刚讲过的内容,把只知识和细节串联起来 4.Slab ...