jquery - 如何使用 Ajax 上传图片 - PHP

Question

如何使用 Ajax 上传图像/文件？检查带有图像的 Facebook 评论（与 facebook 相同）。

有什么可能的方法吗？

如果有办法比我们如何将选定的图像文件移动到我们指定的图像目录？

这是 HTML：

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

Answer 1

jQuery doesn't allow for uploading files using an AJAX request.

You could use the new HTML5 XmlHttpRequest object that allows you to upload files using an AJAX request. Checkout the following article containing detailed instructions and examples: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Here's an example:

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

Alternatively if your client browsers do not support the new HTML 5 File API or you cannot rely on it you could use some of the existing plugins such as jQuery.form or blueimp file upload which will test the capabilities of the client browser and if it doesn't support the HTML 5 File API will fallback to older techniques such as hidden iframes or Flash movies.

Answer 2

使用文件阅读器 API。并编写您的 php 上传文件而不是 i/upload.php。

输入 = document.getElementById("images") ;

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