Передача изображения с помощью Ajax - PullRequest
Новая
       14

Передача изображения с помощью Ajax

0 голосов
/ 01 января 2019

HTML-форма для загрузки изображения: 

<form method="post" enctype="multipart/form-data">
<div>
<input type="file" id="image">
<button type="button" class="ImgSubmitButton" onclick="uploadImages();">UPLOAD IMAGE</button>
</div>
</form>

Javascript / Ajax для отправки данных. 

var RequestObject = false;
if (window.XMLHttpRequest) {
    RequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function uploadImages() {
    if (RequestObject) {
        var formData = new FormData();
        var myfile = document.getElementById('image').files[0];
        formData.append('file', myfile);
        RequestObject.open("POST", "processFileA.php");

        RequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        RequestObject.onreadystatechange = function() {
            if (RequestObject.readyState == 4 && RequestObject.status == 200) {
                document.getElementById('err').innerHTML = RequestObject.responseText;
            }
        }
        RequestObject.send("data=" + formData);
    }
    return false;
}

PHP прост, просто чтобы проверить, установлены ли данные. 

if(isset($_POST['data'])){ 
echo $_POST['data'];
echo "data is set";
} else {
echo "data is not set";
}

Я проверил 3 запроса заголовка.

Первое: данные не установлены. 

RequestObject.setRequestHeader('Content-Type','multipart/form-data');

Второе: данные не установлены. 

RequestObject.setRequestHeader('Content-Type', "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2));

Третье: возвращает этот [объект FormData]. 

RequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

Я также пробовал не запрашивать заголовки, и данные не заданы.

Я знаю, как безопасно обрабатывать форму с помощью регулярной отправки формы с PHP, но не знаю, как это сделать.обрабатывать [объект FormData], как он передается через Ajax.Если это лучший метод или я что-то не так делаю, пожалуйста, дайте мне знать.Мой вопрос заключается в том, как правильно отправить файл изображения через Ajax для его обработки, как если бы вы в обычной форме отправляли его для правильной обработки в PHP.

Пожалуйста, не JQuery.

Ответы [ 2 ]

0 голосов
/ 01 января 2019

Вы можете использовать другой способ с помощью ajax, см. Пример ниже:

ЭТО ОТВЕТ С ПРОСТО JAVASCRIPT AJAX 

<html>
<head>

<script >
function uploadImages(){
var xhr = new XMLHttpRequest();
var url = "processFileA.php";
xhr.open("POST", url, true);
//xhr.setRequestHeader("Content-Type", "application/json");
//xhr.setRequestHeader("accept", "application/json, text/plain, */*");

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var content= xhr.responseText;

    console.log(content);



    }
};

var datae=document.getElementById('uploadimage');
var data = new FormData(datae);
xhr.send(data);
}


</script>
</head>
<body>
<form id="uploadimage" method="post" enctype="multipart/form-data">
<div>
<input type="file" name="file" id="image">
<button type="button" class="ImgSubmitButton" onclick="uploadImages();">UPLOAD IMAGE</button>
</div>
</form>
</body>
</html>

ЭТО ОТВЕТ С ИСПОЛЬЗОВАНИЕМ JQUERY AJAX 

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script >
$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "processFileA.php", // Url to which the request is send
type: "POST",             // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false,       // The content type used when sending data to the server.
cache: false,             // To unable request pages to be cached
processData:false,        // To send DOMDocument or non processed data file it is set to false
success: function(data)   // A function to be called if request succeeds
{
alert('done')

}
});
}));



});

</script>
</head>
<body>
<form id="uploadimage" method="post" enctype="multipart/form-data">
<div>
<input type="file" name="file" id="image">
<button type="submit" class="ImgSubmitButton" >UPLOAD 
            IMAGE</button>
</div>
</form>
</body>
</html>

ФАЙЛ PHP: processFileA.php 

<?php

if(isset($_FILES["file"]["type"]))
{
$file=(file_get_contents($_FILES["file"]['tmp_name']));
file_put_contents('tmp_name.'.str_replace('image/','',$_FILES["file"]["type"]),$file);
}
?>
0 голосов
/ 01 января 2019

ваша проблема в этой строке: 

RequestObject.send("data=" + formData);

когда вы пытаетесь String + formData, вы сделали конкатенацию, и formData преобразуется в String в, как мы знаем formData, это объект.

это правильный подход к отправке данных: 

RequestObject.send(formData);

просто отправьте данные, как в следующих примерах: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

...