使用jQuery HTML5和FormData上传文件的方法示例


本文摘自PHP中文网,作者不言,侵删。

在HTML5之前,有一系列jQuery的技术和插件来实现AJAX文件上传。HTML5引入了可以简化文件上传的FormData类。本篇文章给大家介绍一下使用jQuery HTML5和FormData上传文件的方法示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

$('#myform').on('sumbit', function(){

    var form = $(this);

    var formdata = false;

    if (window.FormData)

    {

        formdata = new FormData(form[0]);

    }

    var formAction = form.attr('action');

    $.ajax({

        url         : '/upload',

        data        : formdata ? formdata : form.serialize(),

        cache       : false,

        contentType : false,

        processData : false,

        type        : 'POST',

        success     : function(data, textStatus, jqXHR){

            // Callback code

        }

    });

    });

你不需要任何插件,flash或iframe技巧就能有效的实现。这里有一些技巧可以使这些代码以我们期望的方式工作:

当我们创建FormData的实例时,我们传递form [0]而不是form。它的意思是实际的表单元素,但不是jQuery选择器。

我们只是传递false而不是定义contentType。这意味着jQuery不向请求添加 Content-Type头部。

我们设置processData为false,所以,jQuery不会将我们的data值(以FormData为基础)转换为字符串。

以上就是使用jQuery HTML5和FormData上传文件的方法示例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

使用jquery html5和FormData上传文件的方法示例

html里FormData对象的详细介绍

使用php和html5 FormData实现无刷新文件上传

详细分析html5 FormData对象的使用

更多相关阅读请进入《FormData》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...