Ajax之文件异步上传的多种方法

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。Ajax对服务器没什么要求，可以为Java EE应用程序，.NET应用程序和其他类型的应用程序服务。可以通过Ajax，可以编写javascript代码来改进HTML，创建出丰富的交互性用户体验。

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<span>@本文来*源gaodai#ma#com搞*!代#%^码$网*</span><textarea>搞gaodaima代码</textarea>('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的值

以上就是Ajax简单实现文件异步上传的多种方法,希望对大家有帮助。

相关推荐：

ajax实时刷新处理的实现方法

几种javascript实现原生ajax的方法

ajax的简单介绍

以上就是Ajax之文件异步上传的多种方法的详细内容，更多请关注搞代码gaodaima其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)