Ajax file asynchronous upload methods

The core of Ajax is the JavaScript object XmlHttpRequest. This object was first introduced in Internet Explorer 5 and is a technology that supports asynchronous requests. In short, XmlHttpRequest allows you to use JavaScript to make requests to the server and handle the responses without blocking the user. Ajax has few server requirements and can serve Java EE applications, .NET applications, and other types of applications. Through Ajax, you can write JavaScript code to improve HTML and create a rich interactive user experience.

1. Understanding the FormData object

FormData is a new class added to Html5, which can simulate form data

Constructor

Explanation

FormData (optional HTMLFormElement form) (optional) An HTML form element that can contain any form of form controls, including file input boxes.

Method

void append(DOMString name, DOMString value)

name form element name

value The value to be passed by the form element

<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. Simple implementation using 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. Use Ajax to implement

$('#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. The ajaxfileupload.js plug-in implements Ajax file upload

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);
        }
    }   
);
}

For PHP, you can use the Files global array to get the file attributes, and the POST global array to get the userName value

The above are various ways to simply implement asynchronous file upload with Ajax. I hope it will be helpful to everyone.

Related recommendations:

How to implement ajax real-time refresh processing

Several javascript methods to implement native ajax

A brief introduction to ajax

The above is the detailed content of Ajax file asynchronous upload methods. For more information, please follow other related articles on the PHP Chinese website!