Ajax简单实现文件异步上传的多种方法

1. 认识FormData对象

FormData是Html5新加进来的一个类,可以模拟表单数据

构造函数

解释

FormData (optional HTMLFormElement form)

(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

void append(DOMString name, DOMString value)

  • name 表单元素名称
  • value 表单元素要传递的值

<form name="myForm"  enctype="multipart/form-data">
    <input type="text" name="userName">
    <input type="file" name="img">
    <input type="button" id="btn" value="submit">
</form>

2. 使用javascript简单实现

function upload() {
    var userName = document.myForm.userName.value;
    var img = document.myForm.img.files[0];
    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);

    var request = new XMLHttpRequest();
    request.open('POST', 'submitform.php');
    request.send(fm);
}

3. 使用Ajax实现

$('#btn').click(function () {
    var userName = document.myForm.userName.value;
    var img = document.myForm.img.files[0];
    
    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);
    $.ajax(
        {
            url: 'submitform.php',
            type: 'POST',
            data: fm,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            //禁止的原因是,FormData已经帮我们做了处理
            success: function (result) {
                //测试是否成功
                //但需要你后端有返回值
                alert(result);
            }
        }
    );
});

4. ajaxfileupload.js插件实现Ajax文件上传

function upload(){
$.ajaxFileUpload({
        url: 'a.php', //用于文件上传的服务器端请求地址
        secureuri: false, //一般设置为false
        fileElementId: 'file', //文件上传空间的id属性  
        dataType: 'HTML', //返回值类型 一般设置为json
        success: function (data, status)  //服务器成功响应处理函数
        {                
            $("#img1").attr("src", data);
            addI(data);
        },
        error: function (data, status, e)//服务器响应失败处理函数
        {
            alert(e);
        }
    }   
);
} 

  • 对于PHP就可以使用Files全局数组拿到文件属性,POST全局数组拿到userName的值

文章一: 个人搭建翻墙服务器

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏业余草

二维码在线生成工具

二维码在生活中使用的场景越来越多!支付宝,微信扫描付等。今天为大家展示一款使用jQuery.qrcode插件制作二维码的方法和工具!

80120
来自专栏伟大程序猿的诞生

微信小程序开发--【Hello World 及代码结构】(二)

通过上一篇我们已经完成了注册及开发环境的搭建,今天我们来开发我们的第一个微信小程序 微信小程序开发注册流程

28070
来自专栏业余草

HTML5 Canvas API详解

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — ...

54520
来自专栏流川疯编写程序的艺术

基于OpenCV 的美颜相机推送直播流

先从opencv(2.4.10版本)采集回来摄像头的图像,是一帧一帧的 每一帧图像是一个矩阵,opencv中的mat 数据结构。

28720
来自专栏程序人生2.0

在WordPress 5.x 中把 HTML 转换成 Markdown 编写文件

即使在 WordPress 5 启用新的 Gutenberg 编辑器之后,很多 Markdown 的插件都失效了。因为不支援到最新的 WordPress 5。

39130
来自专栏业余草

使用easydrag实现可拖动的DIV弹出框

最近在工作中遇到了jquery的easydrag插件,我有一种相见恨晚的赶脚!easydrag极大的方法我们实现div弹框这个...

19460
来自专栏流川疯编写程序的艺术

leetcode 3 Longest Substring Without Repeating Characters最长无重复子串

Given a string, find the length of the longest substring without repeating chara...

13020
来自专栏业余草

分享一款jQuery全屏滚动页面特性案例

分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面...

35130
来自专栏业余草

jQuery实现网页右下角悬浮层提示

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子,很简单。是仿QQ消息。现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还...

28420
来自专栏业余草

网页固定侧栏的做法

固定侧边的做法有很多种,今天为大家介绍一种非常简单的做法。整个html文档只有23行代码就搞定了。

30220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励