jquery - Ajax を使用して画像をアップロードする方法 - PHP

Question

Ajaxを使用して画像/ファイルをアップロードするにはどうすればよいですか? 画像付きの Facebook コメントを確認する(Facebook と同じ)。

そうする方法はありますか？

選択した画像ファイルを指定した画像ディレクトリに移動する方法がある場合はどうすればよいですか?

HTML は次のとおりです。

<input name="image_src" type="file" id="image_src" />

Answer 1

jQuery では、AJAX リクエストを使用してファイルをアップロードすることはできません。

AJAX 要求を使用してファイルをアップロードできる新しい HTML5 XmlHttpRequest オブジェクトを使用できます。詳細な手順と例を含む次の記事をチェックしてください: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

次に例を示します。

var fd = new FormData();
var file = document.getElementById('image_src');
for (var i = 0; i < file.files.length; i++) {
    fd.append('_file', file.files[i]);
}

var xhr = new XMLHttpRequest();
xhr.open('POST', '/server_side_script', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};
xhr.send(fd);

または、クライアント ブラウザーが新しい HTML 5 ファイル API をサポートしていない場合、またはそれに依存できない場合は、jQuery.formまたはblueimp file uploadクライアント ブラウザーの機能をテストする既存のプラグインを使用できます。ファイル API は、非表示の iframe や Flash ムービーなどの古い手法にフォールバックします。

Answer 2

ファイルリーダー API を使用します。i/upload.php の代わりに、php アップロード ファイルを記述します。

入力 = document.getElementById("画像") ;

        if(input != null){



            (function () {
                  input = document.getElementById("images<?=$rowArt['id']?>"), 
                   formdata = false;

                function showUploadedItem (source) {

                    if(document.getElementById("image-list<?=$rowArt['id']?>") != null)
                    {       

                        list = document.getElementById("image-list<?=$rowArt['id']?>"),
                        img  = document.createElement("img");
                        img.style.width = "80px";
                        img.style.height = "80px";
                        img.style.padding = "5px";
                        img.src = source;
                        list.appendChild(img);

                    }
                }   

                if (window.FormData) {
                    formdata = new FormData();
                    document.getElementById("btn<?=$rowArt['id']?>").style.display = "none";
                }

                input.addEventListener("change", function (evt) {
                    document.getElementById("response<?=$rowArt['id']?>").innerHTML = "Uploading . . ."
                    var i = 0, len = this.files.length, img, reader, file;

                    for ( ; i < len; i++ ) 
                    {
                        file = this.files[i];
                        if (!!file.type.match(/image.*/)) 
                        {
                            var myFileName =  file.name  ; 
                            if ( window.FileReader ) 
                            {
                                if (file){
                                    reader = new FileReader();

                                    reader.onloadend = function (e) { 
                                        if(file.size > 50000){
                                            alert('Your image is so large, please resize it to under 50k bytes.') ;
                                            return  ;
                                        }
                                        showUploadedItem(e.target.result, file.fileName);
                                    };
                                    reader.readAsDataURL(file);

                                }
                            }
                            if (formdata) 
                            {
                                formdata.append("images<?=$rowArt['id']?>[]", file);
                            }
                        }
                    }

                    if (formdata) {


                        $.ajax({
                            url: "i/upload.php",
                            type: "POST",
                            data: formdata, 
                            processData: false,
                            contentType: false,
                            success: function (res) {
                                document.getElementById("response<?=$rowArt['id']?>").innerHTML = res; 
                            }
                        });
                    }
                }, false);
            }());
    }