前两篇文章有介绍使用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. HBase常用的JAVA API操作

    为了方便以后查看,总结了一些常用的java操作hbase的代码: package com.mcq; import static org.hamcrest.CoreMatchers.describedA ...

  2. 《高性能 Go 代码工坊》中译

    深入研究 Go 应用性能提升的英语系列文章,这里是中译 https://www.yuque.com/ksco/uiondt

  3. URL 路由系统 + views 函数

    一.URL URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个URL调用这段 ...

  4. pip安装模块使用国内镜像源加速安装

    今天在安装Python模块matplotlib的时候,一直安装不成功,老是提示“socket.timeout: The read operation timed out”或者“Read timed o ...

  5. 【Linux】-- 认识bash shell

    一.前言 我们知道管理整个计算机硬件的其实是系统的内核,这个内核是需要被保护的,所以我们一般用户就只能通过shell来跟内核通信,以让内核达到我们所想要达到的工作.那么Linux系统有多少shell可 ...

  6. Ubuntu 16.04/18.04 安装Shutter截图工具

    在安装Shutter软件之前,先安装依赖包,下载地址: 1.libgoocanvas-common_1.0.0-1_all.deb                 http://launchpadli ...

  7. pdfium舍弃v8依赖

    Step 3 去除v8依赖 用文本编辑器打开pdfium根目录下的pdfium.gyp文件,找到'javascript'及'jsapi'依赖(47行左右): 'dependencies': [ 'sa ...

  8. Linux下JDK中文字体乱码

    java生成图片的时候用到字体,但是liunx系统没有这些字体需要把C:\Windows\Fonts 上传到/usr/local/jdk1.8.0_171/jre/lib/fonts 重启tomcat ...

  9. Hive学习之修改表、分区、列

    Hive学习之修改表.分区.列 https://blog.csdn.net/skywalker_only/article/details/30224309 https://www.cnblogs.co ...

  10. 编码-转义2-mark

    文本编辑器utf8 "一".encode("gbk") 保存:"一"+utf8     保存为16进制的\xe4\xb8\x80,\x标识了 ...