Ajaxファイルの非同期アップロードを簡単に実現する方法

1.FormDataオブジェクトの認識
FormDataはHtml 5に新しく追加されたクラスで、フォームデータをシミュレートできます.
コンストラクタ
説明する
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の値

を取得できる.
記事1:個人構築サーバ