Question

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

有没有办法可以这样做？

如果有一种方法，我们将选择的图像文件移动到指定的图像目录？

以下是HTML：

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

Answer 1

jQuery不允许使用AJAX请求上传文件。

您可以使用新的HTML5 XmlHttpRequest对象，该对象允许您使用AJAX请求上传文件。查看以下文章，其中包含详细说明和示例：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 File API，或者您不能依赖它，则可以使用一些现有的插件，例如jQuery.form或blueimp file upload，这些插件将测试客户端浏览器，如果它不支持HTML 5 File API，则会回退到隐藏的iframe或Flash电影等旧技术。

Answer 2

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

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

如何使用Ajax上传图像 - PHP

2 个答案: