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

1. 认识FormData对象FormData是Html5新加进来的一个类,可以模拟表单数据构造函数解释FormData (optional HTMLFormElement form)(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

void append(DOMString name, DOMString value)name 表单元素名称

value 表单元素要传递的值

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的值

作者：__simple

链接：https://www.jianshu.com/p/d90d2e6bb0d5