Ajax를 사용한 비동기 파일 업로드를 위한 다양한 방법

Ajax의 핵심은 JavaScript 객체 XmlHttpRequest입니다. 이 개체는 Internet Explorer 5에서 처음 도입되었으며 비동기 요청을 지원하는 기술입니다. 간단히 말해서 XmlHttpRequest를 사용하면 JavaScript를 사용하여 서버에 요청하고 사용자를 차단하지 않고 응답을 처리할 수 있습니다. Ajax는 서버 요구 사항이 거의 없으며 Java EE 애플리케이션, .NET 애플리케이션 및 기타 유형의 애플리케이션을 제공할 수 있습니다. Ajax를 통해 JavaScript 코드를 작성하여 HTML을 개선하고 풍부한 대화형 사용자 경험을 만들 수 있습니다.

1. FormData 객체 알아보기

FormData는 Html5에 추가된 새로운 클래스로, 양식 데이터를 시뮬레이션할 수 있습니다.

Constructor

Explanation

FormData(선택적 HTMLFormElement 양식)(선택사항) HTML 양식 요소

Method

void 추가(DOMString 이름, DOMString 값)

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 전역 배열을 사용하여 파일 속성을 가져올 수 있습니다. userName 값을 얻기 위한 전역 배열

위는 Ajax의 단순함입니다. 비동기 파일 업로드를 구현하는 방법은 여러 가지가 있지만 모든 사람에게 도움이 되기를 바랍니다.

관련 권장 사항:

Ajax 실시간 새로 고침 처리 구현 방법

네이티브 ajax 구현을 위한 여러 javascript 방법

ajax에 대한 간략한 소개

위 내용은 Ajax를 사용한 비동기 파일 업로드를 위한 다양한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!